bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Shorthand Border Property

CSS Border - Shorthand Property

Like you saw in the earlier lesson, 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:

  • border-width
  • border-style (required)
  • border-color

Example

Formatted code
p {
  border: 5px solid red;
}

Live preview

Expected output

Some text

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

Left Border

Formatted code
p {
  border-left: 6px solid red;
}

Live preview

Expected output

Some text

Bottom Border

Formatted code
p {
  border-bottom: 6px solid red;
}

Live preview

Expected output

Some text

Previous

CSS Border Color

Next

CSS Rounded Borders