Border

A border is simple line drown around the content area of element. CSS provides prosperities to change style, color and set width of the border.

Border Style

 The border style properties are used to change the style of border.

Properties: border-top-style, border-right-style, border-bottom-style, border-left-style, and the border-style is used to specify all properties in one declaration.
Syntax: property: value;
Values: none  | solid | hidden | dotted | dashed| double | grove | ridge | inset | outset
Default: none
Applies to: all elements
Inherits: no

Example
p { border-style: solid dashed hidden dashed;}
Border Width

 The border width properties are used to specify the thickness of the border.

Properties: border-top-width, border-right-width, border-bottom-width, border-left-width, and the border-width is used to specify all properties in on declaration.
Syntax:  property: value;
values: length | thin | medium | thick
Default: medium
Applies to: all elements
Inherits: no

Example
p { border-width: thin medium thick 20px;}
Border Color

 The border color properties are used to set the color of an element’s border.

Properties: border-top-color, border-right-color, border-bottom-color, border-left-color, and the border-color is used to specify all properties in on declaration.
Syntax: property: value;
Values: color name or rgb/hsl value | transparent
Default: the value of the color property
Applies to: all elements
Inherits: no

Example
p { border-color: green red #fff #f1f1;}
Border Radius

 The border radius properties are used to round the corners of the border.

Properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, and the border-radius is used to specify all properties in one declaration.
Syntax: property: value;
Values: length | percentage
Default: 0
Applies to: all elements
Inherits: no

Example
 p { border-radius: 5px 5px 5px 5px;}

Also created properties for providing style, width and color value in one declaration.

Properties: border-top, border-right, border-bottom, border-left, and border
Syntax: property: value;
Values: border-style border-width border-color
Default: defaults for each property
Applies to: all elements
Inherits: no

Example
p {border: solid 2px red;}
 h1 { border-top: dotted 4px green:}

Leave a Reply