Borders using CSS

Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages.

The width of borders is defined by the property border-width, which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels.

The property border-color defines which color the border has.

There are different types of borders to choose from. You can set the type using border-style property. The values none or hidden can be used if you do not want any border.

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none

Compilation: border

You can compile many properties into one using border. For example,

p {
border-width: 1px;
border-style: solid;
border-color: blue; 

This can be compiled into:

p {
border: 1px solid blue;