Outline CSS

Syntax

The Outline CSS property is shorthand, so it takes three different values to create an outline around an element.

The syntax of the outline is as follows :

The Outline property values :

• Outline-width :
  The outline-width value specifies the thickness or the width of the outline around the element.
• Outline-style :
  The outline-style value specifies the style of the outline, and it gives different values as an option, such as dashed, double, dotted, etc.
• Outline-color :
  As the name says, this value specifies the outline's color.

Let's take a simple example to explain further the outline property syntax.

Suppose you have a div Html element with the content inside, and now you want to create an outline around it.

Below is the out HTML code.

The below code adds the style to our above Div by selecting it via its class name. We're adding the outline property with the 10px thickness or the width, double line as a style value, and the dark magenta color. Even we have the 5px solid blue border around the element.

The image below shows how our div looks after adding the CSS code to it.

outline in CSS

Now we know that The Outline CSS property is a shorthand property which is the combination of three different properties such as :

• outline-color
• outline-style
• outline-width

Let's talk about each property in detail.

1. <outline-color> :

The Outline-color property specifies the color of the outline created around the element.

The color can be set by the :

Now let's see a simple example demonstrating that the outline-color property supports the above color values.

In the above, we have the four p tags with class names : classname, hex, rgb, and hsl.

To demonstrate that the outline-color property supports different color formats, we are adding the outline 2px solid outline to our all p tags. Then we add outline-color values by selecting their respective class names.

The above code specifies the same blue color for the different paragraphs with different color values.

You can see the output of the above code in the image below, all four p tags contain a blue color outline around them.

2. <outline-style> :

The outline-style property specifies the style for the outline (solid, dotted, groove, ridge, or dashed) that goes around an element.

It can take one of the following values :

We've discussed all the values of the outline-style property. Now let's see the example of each value.

The above HTML Code contains several p tags with the respective class names. Let's add to all the p tags by selecting their classnames.

After adding the above code to our CSS, creates the different outline styles for each p tag.

The output of the above code looks like the below image.

3. <outline-width> :

The outline-width property sets the thickness or the width of the element's outline.

It takes two types of values :

Let's take an example and see all the values in action.

Suppose we have four P tags with the respective class names, and you want to specify all types of values. We can do that by selecting the individual class names and setting the values.

The below code selects all four tags using their class names and adds outline width value to it.

The above code creates the outline around an element that looks like the below image.

Outline Shorthand Property

Writing each outline property individually adds extra code to your style sheet and creates confusion. Outline CSS property takes all three property values in a single shorthand property, and we can specify all three values in any order.

• outline-width
• outline-style
• outline-color

We can easily specify previously discussed outline property values in a single shorthand, and it doesn't care about the order of values til all values are specified in a single line.

Here's an example of an outline property.

Let's say we have the three p tags, which describe the order of outline properties.

We're selecting those p tags by their class names and adding the outline style according to their content order.

You can see the output of the above code in the below image, and the above code proves that the order of all three values doesn't matter in the outline property.

Examples

Whenever we need clarification, we have discussed the outline property with its simple example. Now let's see some more examples of this.

Using an outline to Set a Focus Style

To add the outline when the element is focused, we have to use the :focus selector in CSS. The :focus pseudo-class in CSS is used for styling an element currently targeted by the keyboard or activated by the mouse.

Let's say you have a link with the text "CLICK HERE". You want to add the outline only when the link is focused, and you can do that with the help of the focus selector and the outline property.

The above HTML code contains a simple a tag with the text CLICK HERE and is linked to the scaler website.

Now you can add an outline by selecting the a tag and adding the focus selector like the below code.

The above code only adds the 5px solid saddle brown outline when the element is focused.

You can see that in the below example.

The outline around the element is only activated when the part is focused.

outline-offset

The outline-offset property is not part of the outline shorthand but is an important property when it comes to adding space between the outline and borders. The outline-offset property is used to specify the distance or space between the edge of the border and the outline. The specified distance or the space will be transparent, which helps to differentiate the outline from the border.

Outline offset takes the length values and supports the px, rem, and em units.

Let's take an example where both outline and border are added around the element, and you want to differentiate the border and outline by adding space between them.

Below we have the HTML code that we're going to use.

After selecting the div element, we're adding the border and outline to it, as you can see in the below code.

Without the outline-offset property, it will add the border and outline like the below image.

Because of no space between the border and outline, both look messed up, so we are using the outline offset property to add the transparent space between the lines.

The below code does the job for us.

After adding the above code, it will add the 20px space between the border and outline, and the final output looks like the below image.

Accessibility Concerns

Setting the outline to 0 or none will remove the browser's default focus style. So it's better to not use the outline property than specifying the 0 or none value to it. If an element can interact with it must have a visible focus indicator and provide obvious focus styling if the default focus style is removed.

Browser Support

The browser support for the outline property is versatile. It mainly supports all modern browsers such as chrome, firefox, Edge, Safari, And Opera Android, but when it comes to the old version, you have to be careful and have to use vendor prefixes to add support for them.

Related Properties

• outline-color
• outline-style
• outline-width
• outline-offset