CSS Border Shorthand Property

The border shorthand property is used to specify all the border related properties into one property.

CSS Border – Shorthand Property

Like you saw in the previous page, there are numerous properties to think about when managing borders.

To shorten the code, it is likewise possible to determine all the individual border properties in a single property.

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

• border-width

• border-style (required)

• border-color

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 5px solid red;
}
</style>
</head>
<body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style, and border-color.</p>

</body>
</html>

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

Left Border

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-left Property</h2>
<p>This property is a shorthand property for border-left-width, border-left-style, and border-left-color.</p>

</body>
</html>

Bottom Border

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-bottom Property</h2>
<p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p>

</body>
</html>

Result:

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.