CSS Outline Shorthand
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 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;}
Try it Yourself »
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
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;
}
Try it Yourself »
Exercise?What is this?
Test your skills by answering a few questions about the topics of this page
Which of the following is a valid shorthand declaration for a 3px solid red outline?
