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