CSS Outline - Shorthand property
The outline property is a shorthand for these individual properties: outline-width, outline-style (required), and outline-color.
You can give one, two, or three of these values, and the order does not matter.
CSS Outline Shorthand Examples
Here are some outlines written with the shorthand outline property.
Example
Four paragraphs use different shorthand outline values.
Prompt
An HTML page that demonstrates the outline shorthand property.
In an internal
<style> block, give paragraphs padding, then four classes using the shorthand: "dashed", "dotted red", "7px solid yellow", and "thick ridge pink". Add a labeled paragraph for each.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
padding: 5px;
}
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 7px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>
<p class="ex1">A dashed outline.</p>
<p class="ex2">A dotted red outline.</p>
<p class="ex3">A 7px solid yellow outline.</p>
<p class="ex4">A thick ridge pink outline.</p>
</body>
</html>
CSS Outline With Rounded Corners
Outlines can also have rounded corners. The border-radius property is used to round the corners.
Example
Each paragraph combines a shorthand outline with a border-radius for rounded corners.
Prompt
An HTML page that shows outlines with rounded corners using border-radius.
In an internal
<style> block, give paragraphs padding, then five classes each combining an outline shorthand with a border-radius: dashed/8px, dotted red/5px, 7px solid yellow/5px, thick ridge pink/8px, and thick solid green/10px. Add a labeled paragraph for each.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
padding: 5px;
}
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;
}
</style>
</head>
<body>
<p class="ex1">A dashed outline with rounded corners.</p>
<p class="ex2">A dotted red outline with rounded corners.</p>
<p class="ex3">A 7px solid yellow outline with rounded corners.</p>
<p class="ex4">A thick ridge pink outline with rounded corners.</p>
<p class="ex5">A thick solid green outline with rounded corners.</p>
</body>
</html>