By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Using the CSS border properties

Tutorial on how to use the different border properties properly.

Edited: 2015-12-07 15:28

The border properties of CSS are used to control the borders on HTML elements. An element has four borders that can be controlled individually with CSS, but it is usually easier to control all the borders at once, rather than setting each border one by one.

Typically the borders are set using the border shorthand property, which will set all four borders on an element at the same time:

.test {
 width:70%;
 height:1em;
 border:1px solid green; /* Sets all four borders in one declaration */
}

Shorthand Border properties

If you need to control the borders individually, you can instead use the border-left, border-right, border-bottom, border-top properties. These properties are used in a similar manner as the border property, but they will only affect the border that is being targeted:

.test {
 width:70%;
 height:1em;
 border-left:1px solid red; /* Sets the left border */
 border-right:1px solid green; /* Sets the right border */
 border-bottom:1px solid blue; /* Sets the bottom border */
 border-top:1px solid black; /* Sets the top border */
}

As you can see, it is usually much easier to set the borders in one declaration.

Border- width, color, style and radius

It is also possible to control the characteristics of element-borders, such as the color and width, individually. To do this we can use the border-width, border-color and border-style properties.

Typically you will write the declarations in the following order:

.text {
 width:70%;
 height:1em;
 border-width:1px;
 border-style:solid;
 border-color:red;
 border-radius:15px 10px;
}

For even further precision, you can also target the borders one by one, rather than controlling them all at once. This is done using the border- top, right, bottom, left orientation properties.

.text {
 width:70%;
 height:1em;
 border-top-width:1px;
 border-top-style:solid;
 border-top-color:red;
 border-top-radius:15px 10px;
}

For example, if the above was applied to a div element it would look like the below in your browser:

This, however, also means that you would likely have to set each of the four borders individually. Another possibility is to first set a general-style with the one of the shorthand properties, and then overwrite this using an orientational deceleration. I.e.

.text {
 width:70%;
 height:1em;
 border:1px solid black;
 border-top-width:10px;
 border-top-style:dotted;
 border-top-color:red;
}

As you can see, first declaring a general border style, and then using more specific properties, will overwrite the more general declaration.