bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Shorthand Border Property

Formula

CSS Border - Shorthand Property

Like you saw in the previous page, there are many properties to consider when dealing with borders. To shorten the code, it is also possible to specify all the individual border properties in one property. The border property is a shorthand property for the following individual border properties:

Formula

border - width border - style

(required)

Formula

border - color
Example p {
border: 5px solid red;
}

Result:

Some text

You can also specify all the individual border properties for just one side:

Left Border p {
border-left: 6px solid red;
}

Result:

Some text

Bottom Border p {
border-bottom: 6px solid red;
}

Result:

Some text

Previous

CSS Border Color

Next

CSS Margins