CSS Borders

Control HTML Elements Borders With CSS

You can control the size, style and color of all or each individual (top, right, bottom, left) border of html elements within your pages with css. There are a couple of syntaxes for applying border properties to elements that you can use. Lets look at a few.

Css Code:

#element1 {
  border : 1px solid #000;
}
#element2 {
  border-top : 1px solid #0f0;
}
#element3 {
  border : 1px solid #0f0;
  border-right-style : dashed;
  border-left-color : #f00;
  border-bottom : 3px groove #f0f;
}

HTML Code:

<p id="element1">This is element 1</p>
<p id="element2">This is element 2</p>
<p id="element3">This is element 3</p>

Browser Display:

This is element 1


This is element 2


This is element 3

As you can see, you can choose to change the entire elements border size, style or color with border-size, border-style, border-color or you can apply all border style properties to border sides by either declaring a specific side (ex. border-right) or applying styles to all borders by just declaring "border".

Please look through our CSS Properties List for more information on css border properties.

CSS Tutorials