CSS Outline
An outline is a line drawn outside the element's border.
CSS has the following outline properties:
- outline-style
- outline-color
- outline-width
- outline-offset
- outline
Note: Outline differs from borders! Unlike the border, the outline is drawn outside the element's border and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height are not affected by the width of the outline.
CSS Outline Style
The outline-style property specifies the style of the outline, and can have one of the following values:
- dotted - Defines a dotted outline
- dashed - Defines a dashed outline
- solid - Defines a solid outline
- double - Defines a double outline
- groove - Defines a 3D grooved outline
- ridge - Defines a 3D ridged outline
- inset - Defines a 3D inset outline
- outset - Defines a 3D outset outline
- none - Defines no outline
- hidden - Defines a hidden outline
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outline</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>The outline-style Property</h2>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
outline-color: red;
}
p.dotted {
outline-style: dotted;
}
p.dashed {
outline-style: dashed;
}
p.solid {
outline-style: solid;
}
p.double {
outline-style: double;
}
p.groove {
outline-style: groove;
}
p.ridge {
outline-style: ridge;
}
p.inset {
outline-style: inset;
}
p.outset {
outline-style: outset;
}
Output:
CSS Outline Width
The outline-width property specifies the width of the outline and can have one of the following values
- thin (typically 1px)
- medium (typically 3px)
- thick (typically 5px)
- A specific size (in px, pt, cm, em, etc.)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outline</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>The outline-style Property</h2>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p.dotted {
border: 1px solid yellow;
outline-style: solid;
outline-width: thin;
outline-color: red;
}
p.dashed {
border: 1px solid yellow;
outline-style: solid;
outline-width: medium;
outline-color: red;
}
p.solid {
border: 3px solid yellow;
outline-style: solid;
outline-width: thick;
outline-color: red;
}
output
CSS Outline Color
The outline-color property is used to set the color of the outline.
The color can be set by:
- name - Specify a color name, like "red"
- HEX - specify a hex value, like "#ff0000"
- RGB - specify a RGB value, like "rgb(255,0,0)"
- HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
- invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)
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
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>outline</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>The outline-style Property</h2>
<p class="dotted">outline</p>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p.dotted {
border: 2px solid red;
outline: 4px solid violet;
}
CSS Outline Offset
The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.
Do leave your comments