CSS Shorthand Border Properties

CSS Border - Abbreviated Properties

As you saw in the previous chapter, many properties need to be considered when handling borders.

To reduce code, you can also specify all individual border properties in one attribute.

border The property is a shorthand for the following individual border properties:

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

Example

p {
  border: 5px solid red;
}

Result:

Some Text

Try It Yourself

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

Left Border

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

Result:

Some Text

Try It Yourself

Bottom Border

p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}

Result:

Some Text

Try It Yourself