CSS Outline Properties

CSS Outline Properties: In CSS, an outline is a line that is used to draw around the elements. These are specified outside the border for making the element stand out.

CSS Outline Block Diagram

CSS Outline Block Diagram

CSS Outline Properties Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid black;
outline: solid blue 10px;
margin: auto;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<p>This element has a 2px black border and a blue outline with a width of 10px.</p>
</body>
</html>

CSS Outline Properties Example Output

CSS Outliner Example Output



CSS Outline Properties

PROPERTY DESCRIPTION
Outline A shorthand property for setting outline-width, outline-style, and outline-color in one declaration
outline-color Sets the color of an outline
outline-offset Specifies the space between an outline and the edge or border of an element
outline-style Sets the style of an outline
outline-width Sets the width of an outline

CSS Outline Style

The style of the outline can be specified by outline_style property and they are listed below

  • dotted –for dotted outline
  • dashed –for dashed outline
  • solid –to  get a  solid outline
  • double – to  get a  double outline
  • groove – to  get a  3D grooved outline
  • ridge – to  get a  3D ridged outline
  • inset – to  get a  3D inset outline
  • outset – to  get a 3D outset outline
  • none – Defines without the outline
  • hidden – Defines a hidden outline

Different Outline-Style Values Example

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:black;}
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;}
</style>
</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>

Different Outline-Style Values Example Output

Different Outline-Style Values Example Output

CSS Outline Color

This outline-color property is used to provide color to the outline.

The Outliner color can be set by:

Name defines a color name, like “red”
RGB defines a RGB value, like “rgb(255,0,0)”
Hex defines a hex value, like “#ff0000”
Invert performs a color inversion (which make sure that the outline is visible, regardless of color background)

CSS Outline Color Example

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 1px solid black;
outline-style: double;
outline-color: green;
}
p.ex3 {
border: 1px solid black;
outline-style: outset;
outline-color: yellow;
}
</style>
</head>
<body>
<h2>The outline-color Property</h2>
<p class="ex1">A solid red outline.</p>
<p class="ex2">A double green outline.</p>
<p class="ex3">An outset yellow outline.</p>
</body>
</html>

CSS Outline Color Example OutputCSS Outline Color Example Output

Invert Property Example

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}
</style>
</head>
<body>
<h2>Using outline-color:invert</h2>
<p class="ex1">A solid invert outline.</p>
</body>
</html>

Invert Property Example Output

Invert Property Example Output

CSS Outline Width

To specify the width of an outline you have to use outline-width property and the following values will help to describe the width of the outline.

  • Thin (typically 1px)
  • Medium (typically 3px)
  • Thick (typically 5px)
  • A specific size (in px, pt, cm, em, etc)

Outlines with Different Widths Example

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: blue;
outline-width: thin;
}
p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: blue;
outline-width: medium;
}
p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: blue;
outline-width: thick;
}
p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: blue;
outline-width: 4px;
}</style>
</head>
<body>
<h2>The outline-width Property</h2>
<p class="ex1">A thin outline.</p>
<p class="ex2">A medium outline.</p>
<p class="ex3">A thick outline.</p>
<p class="ex4">A 4px thick outline.</p>
</body>
</html>

Outlines with Different Widths Example Output

Invert Property Example Output

CSS Outline with Shorthand Property

The outline property has a shorthand property for describing below mentioned individual properties.

  • Outline-Width
  • Outline-Style (required)
  • Outline-Color

The outline property is described as one, two, three values from the list above, the order does not matter.

Shorthand Outline Property Example

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {outline: dashed blue;}
p.ex2 {outline: dotted black;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge blue;}
</style>
</head>
<body>
<h2>The outline Property</h2>
<p class="ex1">A dashed outline.</p>
<p class="ex2">A dotted red outline.</p>
<p class="ex3">A 5px solid yellow outline.</p>
<p class="ex4">A thick ridge pink outline.</p>
</body>
</html>

Shorthand Outline Property Example Output

Shorthand Outline Property Example OutputCSS Outline Offset

This outline-offset property used to add space between an outline and the edge or border of an element. There is transparent space between an element and its outline.

CSS Outline Offset Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid blue;
outline-offset: 15px;
}
</style>
</head>
<body>
<h2>The outline-offset Property</h2>
<p>This paragraph has an outline 15px outside the border edge.</p>
</body>
</html>

CSS Outline Offset Example Output

CSS Outline Offset Example Output

Transparent Space Outline Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 30px;
background:blue;
border: 1px solid black;
outline: 1px solid yellow;
outline-offset: 15px;
}
</style>
</head>
<body>
<h2>The outline-offset Property</h2>
<p>This paragraph has an outline of 15px outside the border edge.</p>
</body>
</html>

Transparent Space Outline Example OutputTransparent Space Outline Example Output