Bugl — code interview practice that feels like a game

Loading lesson path

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind CSS Shorthand Border Property?

Lesson checks

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___: 5px solid red;

3Order

Put the learning moves in the order that makes the concept easiest to apply.

To shorten the code, it is also possible to specify all the individual border properties in one property.

Like you saw in the earlier lesson, there are many properties to consider when dealing with borders.

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:

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