CSS Outline – Tutorials Art

CSS outline property draws a line around the outside of an element. It’s similar to border except that:

It always goes around all the sides, you can’t specify particular sides
It’s not a part of the box model, so it won’t affect the position of the element or adjacent elements (nice for debugging!)

Other minor facts include that it doesn’t respect border-radius (makes sense I suppose as it’s not a border) and that it isn’t always rectangular. If the outline goes around an inline element with different font-sizes, for instance, Opera will draw a staggered box around it all.

It is often used for accessibility reasons, to emphasize a link when tabbed to without affecting positioning and in a different way than hover.

h2 {
  outline: 5px dotted red;
}

div.a {
  outline: 2px dashed yellow;
}

CSS Outline property

The outline property is a shorthand property for:

outline-width
outline-style (required)
outline-color

CSS Outline Color

If outline-color is omitted, the color applied will be the color of the text.

The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.

Here is an example

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

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

p {
    border: 2px black;
    outline-color: yellow;

p.solid {outline-style: solid;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.double {outline-style: double;}
p.dashed {outline-style: dashed;}
p.dotted {outline-style: dotted;}

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)

The following example shows some outlines with different widths:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thick; outline-style:solid;">
         Outline is solid
      </p>
      <br />
      
      <p style = "outline-width:thin; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:8px;outline-style:dotted;">
         This text is having 8x dotted outline.
      </p>
   </body>
</html>

Outlines are very similar to borders, but there are few major differences as well −

An outline does not take up space.
Outlines do not have to be rectangular.
Outline is always the same on all sides; you cannot specify different values for different sides of an element.

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.

The following example specifies an outline 15px outside the border edge:

p {
  margin: 30px;
  background: red;
  border: 3px black;
  outline: 5px  yellow;
  outline-offset: 15px;
}

CSS Outline Shorthand

The outline property is a shorthand property for setting the following individual outline properties:

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

The following example shows some outlines specified with the shorthand outline property: