css border

the css border properties specify the width, color, style of an element's border.

Css border-style

the border-style property sets the style of the border.

the border-style property can't inherited.its applies to all elements.

css border-style values:

none:-no border is drawn.

dotted :-the border is a dotted line drawn on top of the background of the element.

dashed :-the border is a dashed line drawn on top of the background of the element.

solid :-the border is a solid line.

double :-the border is a double line drawn on top of background of the element.

groove :-a 3d groove is drawn in colors based on the <color> value.

ridge :-a 3d ridge is drawn in colors based on the <color> value.

inset :-a 3d inset is drawn in colors based on the <color> value.

outset :-a 3d ridge is drawn in colors based on the <color> value.


Css border color

      css border style

The border-color property is used to set the color of border.The border-color property can't inherited.its applies to all elements.

The border-color value can be set by:

  • name -a color name,(e.g. lime).
  • rgb -a rgb method,(e.g. 122,121,111).
  • hex -a hex value,(e.g. #ff0000).
                   <style type="text/css"; }
                   
    div{border-style:solid;  border-width:2pxborder-color:lime; }
                   
    p { border-style:inset;  border-width:2pxborder-color:#3a4b9c; }
                   
    h1 { border-style:outset;  border-width:2pxborder-color:rgb(122,220,222); }
                   
                   </style>

Css border width

the border-width property is used to set the width of an element borders.

the border-width property can't inherited.its applies to all elements.

the value of this property could be either a length in px,pt or cm or it should be set to thin,medium or thick.

the border widths cannot be negative.

 <style  type="text/css" }
                   
       div { border-style:solid; border-width:2px; border-color:lime; }
                   
       p { border-style:inset; border-width:3px; border-color:#3a4b9c; }
                   
       h1 { border-style:outset; border-width:5px; border-color:rgb(122,220,222); }
                   
 </style>

Css border - shorthand property

the border shorthand property allows you to specify color, style, and width fo lines in one property.

the border shorthand property allows for the following individual border properties:

  • border-width
  • border-style(required)
  • border-color
                         <style type="text/css"}
                         
                         div{ border:1px solid #3a5b9c; }
                         
                         p  { border:3px double #4caabb; }
                         
                         h1 { border:5px groove #22aa11; }
                         
                         </style>

Css border style

in css we can set defferent border for different styles.

the border style,border-width,border-color can have one to four values.

  • border-style:double
  • all four borders are double.
  • border-width:2px
  • all four borders width are 2px.
  • border-color:#3a4b9c
  • all four borders color same.

border pattern

  • border-style:solid inset
  • top and bottom borders are solid.
  • left and right borders are inset.
  • border-width:2px 4px
  • top and bottom borders width are 2px.
  • left and right borders width are 4px.
  • border-color:red #0c0;
  • top and bottom borders color red.
  • left and right borders color #0c0.

border pattern

  • border-style:solid inset dotted
  • top border are solid.
  • left and right borders are inset.
  • bottom border are dotted.
  • border-width:2px 4px 3px
  • top border width are 2px.
  • left and right borders width are 4px.
  • bottom border width are 3px.
  • border-color:red #0c0 pink
  • top border color red.
  • left and right borders color #0c0.
  • bottom border color pink.

border pattern

  • border-style:solid inset dotted double
  • top border are solid.
  • right border are inset.
  • bottom border are dotted.
  • left border are double.
  • border-width:2px 4px 3px 6px
  • top border width are 2px.
  • right border width are 4px.
  • bottom border width are 3px.
  • left border width are 6px.
  • border-color:red #0c0 pink orange
  • top border color red.
  • right border color #0c0.
  • bottom border color pink.
  • left color orange.

border pattern

Css Border Property more examples


all css border properties.

propertydescription
bordersets all the border properties in one statement.
border-topsets all the top border properties in one statement.
border-rightsets all the right border properties in one statement.
border-bottomsets all the bottom border properties in one statement.
border-leftsets all the left border properties in one statement.
border-stylesets the style of the four border.
border-widthsets the width of the four border.
border-colorsets the color of the four border.
border-top-stylesets the style of the top side border.
border-right-stylesets the style of the right side border.
border-bottom-stylesets the style of the bottom side border.
border-left-stylesets the style of the left side border.
border-top-widthsets the width of the top side border.
border-right-widthsets the width of the right side border.
border-bottom-widthsets the width of the bottom side border.
border-left-widthsets the width of the left side border.
border-top-colorsets the color of the top side border.
border-right-colorsets the color of the right side border.
border-bottom-colorsets the color of the bottom side border.
border-left-colorsets the color of the left side border.