News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

CSS Tutorial – 16 – Border

CSS tutorials

The border properties are used to format the element borders. All of these properties can be applied to any element and they do not inherit.

Border-style

To make the border visible around an element the border-style property has to be set to something other than none, which is the default value for most elements in most browsers. As seen below, there are several options for how the border can be displayed.

border-style (1-4) | border-top-style | 
border-right-style | border-bottom-style | 
border-left-style : 
  none | dashed | dotted | double | groove | 
  hidden | inset | outset | ridge | solid

The border-style property is one of several properties that can have one to four values. The values for all of these properties are handled in the same way, as described below.

border-style: 1 2 3 4; => top=1, right=2, bottom=3, left=4
border-style: 1 2 3; => top=1, right=2, bottom=3, left=2
border-style: 1 2; => top=1, right=2, bottom=1, left=2
border-style: 1; => top=1, right=1, bottom=1, left=1

The border-style property also has four sub properties, which can be used to set a specific border side’s style.

border-top-style:    dotted; 
border-right-style:  dashed; 
border-bottom-style: ridge; 
border-left-style:   inset;

Border-width

Border-width sets the width of the borders. It can be set with a unit of length or using one of the predefined values: “thin”, “medium”, or “thick”. Just as border-style, this property can have one to four values and has four sub properties for setting the individual borders’ width.

border-width (1-4) | border-top-width | 
border-right-width | border-bottom-width | 
border-left-width : 
  <length> | thin | medium | thick

Border-color

Border-color sets the color of the borders. CSS does not specify what the default border color should be, but most browsers will render it grey. Just as border-style and border-color, this property can have one to four values and has four sub properties for setting the individual borders’ color.

border-color (1-4) | border-top-color | 
border-right-color | border-bottom-color | 
border-left-color : 
  <color> | transparent

Border

The border property can set all sides and properties for the border in one declaration.

border | border-top | border-right | 
border-bottom | border-left : 
  <border-width> + <border-style> + <border-color>

The values can be set in any order since there is no ambiguity. Either one of the values may be omitted.

border: 5px solid red;

The border property has four sub properties for setting all border properties for each of the individual sides.

border-top:    red;		 
border-right:  blue;
border-bottom: aqua; 
border-left:   lime;
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours