CSS Outline

CSS outline is just like CSS border property. It facilitates us to draw an extra border around an element to get visual attention.

It is as easy as to apply as a border. They are generally used to indicate focus or active states of the elements such as buttons, links, form fields, etc.


Outlines Vs Borders

An outline looks very similar to the border, but it differs from border in the following ways:

  • Outlines do not take up space.
  • Unlike borders, outlines won’t allow us to set each edge to a different width, or set different colors and styles for each edge.
  • It donot have any impact on surrounding elements apart from overlapping.
  • Unlike borders, outlines do not change the size or position of the element.
  • Outlines may be non-rectangular, but we cannot create circular outlines.

Note: If we put an outline on an element, it will take up the same amount of space on the web pages as if you didn’t have an outline on that element. Because it overlap margins (transparent area outside of the border) and surrounding elements.


Outline Styles

This style property sets the style of an element’s outline such as: solid, dotted, etc.

The outline-style property can have one of the following values: none, solid, dashed, dotted, double, inset, outset, groove, and ridge.

Input:-

Index.html
	
<body> 
	  <h1>Heading 1</h1>
   <p>Paragraph 1</p> 
</body>

Style.css

h1 {
  outline-style: dotted;
}
p {
  outline-style: ridge;
}

Output:-

The value none displays no outline. The values inset, outset, groove, and ridge creates a 3D like effect which essentially depends on the outline-color value.

Note: We must specify a outline style in order to make the outline appear around an element, because the default outline style is none. Whereas, the default outline width or thickness is medium, and the default outline color is the same as the text color.


Outline Width

The outline-width property specifies the width of the outline to be added on an element.

Input:-

Index.html
	
<body> 
	  <h1>Heading 1</h1> 
</body>

Style.css

h1 {
  outline-style: dotted;
  outline-width: 10px;
}

Output:-

Note:- The outline width can be specified using any length value, such as px, em, rem, and so on. It can also be specified using one of the three keywords: thin, medium, and thick. Percentage or negative values are not allowed — just like the border-width property.


Outline Color

The outline-color property sets the color of the outline. This property accepts the same values as those used for the color property.

Input:-

Index.html
	
<body> 
	  <h1>Heading 1</h1> 
</body>

Style.css

h1 {
  outline-style: dotted;
  outline-width: 10px;
  outline-color: #0000ff;
}

Output:-


Outline Shorthand Property

This is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule.

If the value for an individual outline property is not specified while setting the outline shorthand property, the default value for that property will be used instead, if any.

For example, if the value for the outline-color property is missing or not specified when setting the outlines, the element’s color property will be used as the value for the outline color.

Input:-

Index.html
	
<body> 
	  <h1>Heading 1</h1> 
</body>

Style.css

h1 {
  outline: 5px solid 	#ff00ff;
}

Output:-


Removing Outline Around Active Links

The outline property is widely used to remove the outline around active links.

However, it is recommended to apply some alternative style to indicate that the link has focus.

a, a:active, a:focus {
    outline: none;
}