CSS borders

 CSS borders


The CSS allows to style borders by using CSS border properties like color, style, width, etc of properties.


CSS border style:

 

The border-style styles the border by using a different kind of borders .

Following are the list of the borders kind,we can use in the css

dotted =: give dotted border to the border

dashed =: give dashed border to the border

solid =: give Solid border to the border

double =:give double border to the border

groove =: give 3D groove border to the border. The effect depends on the border-color value

ridge =: give 3D ridge border to the border. The effect depends on the border-color value

inset =: give 3D inset border to the border. The effect depends on the border-color value

outset =: give 3D outset border to the border. The effect depends on the border-color value

none =:give no border to the border

hidden =:give hidden border to the border



Example of css border style:


<style type="text/css"> p.dashed{ border-style: dashed; } p.dotted{ border-style: dotted; } p.solid{ border-style: solid; } p.double{ border-style: double; } p.ridge{ border-style: ridge; border-color: yellow; } p.groove{ border-style: groove; border-color: red; } p.inset{ border-style: inset; } p.outset{ border-style: outset; border-color: red; } p.hidden{ border-style: hidden; } </style>


Output:


This A dashed border.

This A dotted border.

This A solid border.

This A double border.

This A ridge border.

This A groove border.

This A dashed border.

This A outset border.

Comments

Popular posts from this blog

Diferrence between flutter and react native

Flutter Widgets

Flutter layout