outline

Something like border on steroids. Does not affect the size of the element, can be offset from the edges by any distance.

Present in standard browser styles for highlighting focused interactive elements. Type sizes do not change, the layout of the page does not break, but the user visually sees which element is in focus. A win-win situation!

Naturally, this property can be applied to any element without any tricks 😏

Let's add an outline to the element, which will be offset from the edge by 10 pixels. For this, we use the additional property outline-offset. It goes hand in hand with outline.

We will set an outline with a width of 5 pixels in green color. We will offset it from the edge of the element by 10 pixels. A border is set for clarity.

        
          
          .block {  border: 1px solid black;  outline: 5px solid green;  outline-offset: 10px;}
          .block {
  border: 1px solid black;

  outline: 5px solid green;
  outline-offset: 10px;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

outline is actually a shortcut — a shorthand property for writing several values at once. Inside it contains the properties outline-width, outline-style and outline-color.

Let's break down the available values for each property, and then we'll put everything in one box:

• The keywords thin, medium, thick — specify thin, medium, or thick width. Pixel values are at the discretion of the browser, but usually correspond to 1, 3, and 6 pixels respectively.
• Specific size — a size in any unit of measurement available on the web. For example, 10px or 0.2em.

• none — outline is not displayed, even if a value is set for outline-width.
• dotted — outline will consist of dots. Round dots, like this •••••
• dashed — outline will be in the form of a dashed line.
• solid — the default value if not specified otherwise. A solid line.
• double — a double solid line.

Further, the specification creators got creative and invented several decorative outlines. Lighting for such frames comes from above at a right angle. And this cannot be influenced:

• groove — the outline will appear as if the frame is three-dimensional, with a concave center and highlighted. The color of the outline (if it differs from black) will become two-colored.
• ridge — the outline will appear three-dimensional, with its center raised. Opposite to groove.
• inset — a three-dimensional frame, edges directed inward into the element.
• outset — a three-dimensional frame, edges directed outward from the element, opposite to inset.

It is easiest to understand through examples:

• Any available color value on the web, including the keywords transparent, currentColor.
• invert — a keyword that sets the outline color to the opposite of the element's background color. Convenient for achieving maximum contrast.

We gather all values into a shortcut.

One mandatory value for outline-style is specified:

        
          
          .selector {  outline: solid;}
          .selector {
  outline: solid;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

outline-color | outline-style:

        
          
          .selector {    outline: #f66 dashed;}
          .selector {
    outline: #f66 dashed;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

outline-style | outline-width:

        
          
          .selector {  outline: inset thick;}
          .selector {
  outline: inset thick;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

outline-color | outline-style | outline-width:

        
          
          .selector {  outline: green solid 3px;}
          .selector {
  outline: green solid 3px;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

As can be understood from the example above, for the outline property, you can specify only one value indicating the outline style. Without it, the outline will not be displayed. If only one value is set, the color will match the text color (emulating the keyword currentColor), and the size will correspond to the keyword medium (which, in turn, equals 3 pixels).

Let's also look at the available values for outline-offset:

• It can take any size indication in any unit of measurement as a value. A negative value can be set, and then the outline will be shifted inward. In this case, the width of the outline itself should be taken into account since the outline-offset property indicates the distance from the edge of the element to the inner edge of the outline.

💡 In current versions of browsers, the outline adapts to the shape of the outlined element, just like border.

💡 The outline unapologetically overlays neighboring elements, ignoring them.

💡 If you set an outline for multiline text, each line will be surrounded by its own rectangle. It's better to set an outline for the parent.

In practice

Copy the link "In practice"

Advice 1

Copy the link "Advice 1"

🛠️ If your designer asks to remove the outline from focused elements, do not use outline: none, even if it seems like the simplest way.

Use the outline-color property with the value transparent.

The outline on focus will disappear if the user has not enabled high contrast mode. In contrast mode, the outline will be present, but the colors and beautiful designer shadows will not.

+ Open

Advice 2

Copy the link "Advice 2"

🛠 If you do not like the outline of elements on focus, do not remove it completely, but ask the designer or come up with a more appropriate style for your site.

🛠 Using the combination of border and outline, you can create a multiple border around an element.

+ Open