Cascading Style Sheets CSS Tutorial Border Property

CSS Borders

p{
border-top-style:dashed;
border-right-style:double;
border-bottom-style:groove;
border-left-style:ridge;
}

Here we can set the style for each side using the value designations found in the table on page 1 of this section. You can also set a border width or color if you want. More on widths in a minute.

solid

dotted

dashed

double

groove

ridge

inset

outset

Above are all the styles of borders you can have except "none" which is self explanatory. Check them out in different browsers to see how they look.

p{
border-style:dotted;
}

This is the shortcut for setting the border style. Here we've set all four borders to one style.

p{
border-style:dotted dashed;
}

Just like on the last page about color, the order of the styles follows the order of the sides. When you specify more than one style the browser applies them in order starting from the top. Here we've specified the top style (dotted) but since we didn't specify a style for the opposite side, it also applies to the bottom. The second style (dashed) applies to the next side in the order, the right side. Again, since we didn't specify a style for its opposite, the left side, it applies to that one also.

p{
border-style:dotted dashed double;
}

Here we've specified styles for three sides. If you use the sides order, the only side with no style is the left. So it takes on the style of its opposite, the right sides dashed style.

p{
border-style:none dashed double solid;
}

With this one we've specified a style for all four sides. None allows us to leave off a side if we wish. Just like with the border-color, it saves quite a bit of coding over the first example on this page.

Borders Page 2. Borders Page 4.