Bugl — Daily coding puzzles and drills

Formula

CSS Outline - Shorthand property

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

Formula

outline - width outline - style

(required)

Formula

outline - color

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

CSS Outline Shorthand Examples

Here are some different outlines specified with the shorthand outline property: A dashed outline. A dotted red outline. A 7px solid yellow outline. A thick ridge pink outline.

Example

Demonstration of the outline shorthand property: p.ex1

{outline: dashed;}

p.ex2

{outline: dotted red;}

p.ex3

{outline: 7px solid yellow;}

p.ex4

{outline: thick ridge pink;}

CSS Outline With Rounded Corners

Outlines can also have rounded corners.

Formula

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 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;
}