This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size. Tap Here!

Smartphone icons created by Freepik - Flaticon

2.3.4 Border Shorthand

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:

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

Example 1: Border Shorthand part 1

p {
  border: 5px solid red;
}

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

Example 2: Border Shorthand part 2 Left Border

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

Example 3: Border Shorthand part 3 Bottom Border

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