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 Outline Shorthand?

Lesson checks

Practice each idea before moving on

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.

___: dashed;

3Order

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

The outline property is a shorthand property for setting the following individual outline properties:

CSS Outline With Rounded Corners

CSS Outline - Shorthand property

The outline property is a shorthand property for setting the following individual outline properties:

outline-width
outline-style (required)
outline-color

You can specify one, two, or three values from the list above. The order of the values does not matter.

CSS Outline With Rounded Corners

Outlines can also have rounded corners.

The border-radius property is used to add rounded borders to an element.

Here are some different outlines with rounded corners:

A dashed outline.

A dotted red outline.

A 7px solid yellow outline.

A thick ridge pink outline.

Example

Formatted code

p.ex1 {
  outline: dashed;
  border-radius: 8px;
}
p.ex2 {
  outline: dotted red;
  border-radius: 5px;
}
p.ex3 {
  outline: 7px solid yellow;
  border-radius: 5px;
}
p.ex4 {
  outline: thick ridge pink;
  border-radius: 8px;
}
p.ex5 {
  outline: thick solid green;
  border-radius: 10px;
}

Live preview