Cascading Style Sheets CSS Tutorial Border Property

CSS Borders

p{
border-top-color:red;
border-right-color:green;
border-bottom-color:yellow;
border-left-color:blue;
border-style:solid;
}

Here we can set the color for each side using the same color designations we used for backgrounds and text. Click here to review them. You must also set a border style to actually have the border appear. You can also set a border width if you want. More on styles and widths in a minute.

p{
border-color:red;
border-style:solid;
}

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

p{
border-color:red green;
border-style:solid;
}

Remember what I said on the last page about the order of the sides? When you specify more than one color, style or width the browser applies them in order starting from the top. Here we've specified the top color (red) but since we didn't specify a color for the side opposite this one, it also applies to the bottom. The second color (green) applies to the next side in the order, the right side. Again, since we didn't specify a color for its opposite, the left side, it applies to that one also.

p{
border-color:red green yellow;
border-style:solid;
}

In this one we've specified colors for three sides. If you use the order, the only side with no color is the left. So it takes on the color of its opposite, the right sides green color.

p{
border-color:red green yellow blue;
border-style:solid;
}

Here we've specified a color for all four sides. As you can see it saves quite a bit of coding over our first example on this page.

Borders Page 1. Borders Page 3.