Selected Reading
Q&A

CSS - Outlines

CSS Outlines

CSS defines a special sort of element decoration called an outline which is drawn outside the element's border. CSS 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 Outlines - Demo

Try to select different values for CSS outline property and see the result in right box.

CSS Outlines - Example

Following is rectangle having a black border of 5px and green outline of 30px.

Outline Example

This tutorial will teach us how to set different properties associated with outlines. CSS alows us to control an outline width, its color, style etc.

CSS Outline Width

The outline-width property specifies the width of the outline to be added to the box. Its value should be a length or one of the values thin, medium, or thick, just like the border-width attribute.

thin = 1px
medium = 3px
thick = 5px
A specific size (in px, pt, cm, em, etc)

A width of zero pixels means no outline.

Example

Here is an example to set outline width at different sizes −

<html>
<body>
   <p style = "outline-width: thin; outline-style:solid; padding: 5px">
      This text is having thin outline.
   </p>
   <p style = "outline-width: medium; outline-style:solid; padding: 5px">
      This text is having thick outline.
   </p>
   <p style = "outline-width: thick; outline-style:solid; padding: 5px">
      This text is having 5px outline.
   </p>
   <p style = "outline-width: 7px; outline-style:solid; padding: 5px">
      This text is having 7px outline.
   </p>
</body>
</html>

CSS Outline Style

The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element. It can take one of the following values −

auto − Default outline provided by the browser.
none − No outline is used. The outline-width is 0.
solid − Outline is a single solid line.
dotted − Outline is a series of dots.
dashed − Outline is a series of short line segments.
double − Outline is two solid lines.
groove − Outline looks as though it is carved into the page.
ridge − Outline looks the opposite of groove.
inset − Outline makes the box look like it is embedded in the page.
outset − Outline makes the box look like it is coming out of the canvas.

Example

Here is an example −

<html>
<body>
   <p style = "outline-width:thick; outline-style:solid; padding:5px;">
      This text is having solid  outline.
   </p>
   <p style = "outline-width:thick; outline-style:dotted; padding:5px;">
      This text is having dotted  outline.
   </p>
   <p style = "outline-width:thick; outline-style:dashed; padding:5px;">
      This text is having dashed  outline.
   </p>
   <p style = "outline-width:thick; outline-style:double; padding:5px;">
      This text is having double  outline.
   </p>
   <p style = "outline-width:thick; outline-style:groove; padding:5px;">
      This text is having groove  outline.
   </p>
   <p style = "outline-width:thick; outline-style:ridge; padding:5px;">
      This text is having ridge  outline.
   </p>
</body>
</html>

CSS Outline Color

The outline-color property is used 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.

Name - Example red, blue or green
HEX - Example #ff0000
RGB - Example rgb(255,0,0)
HSL - Example hsl(0, 100%, 50%)
invert - inverts the color with background

Example

Here is an example −

<html>
<body>
   <p style = "outline-width:thick; outline-style:solid; outline-color:red;padding:5px;">
      Outline color set with name "red".
   </p>
   <p style = "outline-width:thick; outline-style:solid; outline-color:#40a944; padding:5px;">
      Outline color set with Hex code "#40a944".
   </p>
   <p style = "outline-width:thick; outline-style:solid; outline-color:rgb(255,200,0); padding:5px;">
       Outline color set with RGB code "rgb(255,200,0)".
   </p>
   <p style = "outline-width:thick; outline-style:solid; outline-color:hsl(0, 50%, 50%); padding:5px;">
       Outline color set with HSL code "hsl(0, 50%, 50%)".
   </p>
   <p style = "outline-width:thick; outline-style:solid; outline-color:invert; padding:5px;">
       Outline color set with invert option.
   </p>
</body>
</html>

CSS Outline Offset

The outline-offset property is used to specify the space between an outline and the border edge of an element. The space between the outline and the element is transparent.

The following example show an outline 20px outside the border of the element:

Outline Offset Example

The above example shows that the space between an element's border and its outline is transparent.

Example

Here is an example −

<html>
<body>
   <p style = "border:1px solid #000; outline:1px solid red; outline-offset:20px;margin:25px">
      Outline offset 20px;
   </p>
   <br>
   <p style = "border:1px solid #000; outline:1px solid red; outline-offset:10px;margin:15px">
      Outline offset 10px;
   </p>
   <br>
   <p style = "border:1px solid #000; outline:1px solid red; outline-offset:5px;margin:10px">
      Outline offset 5px;
   </p>
</body>
</html>

CSS Outline Shorthand

The outline property is a shorthand property that allows you to specify values for any of the three properties, style, color and width. You can specify these properties in any order using the follwing syntax.

Syntax

outline: width style color;

Example

Here is an example −

<html>
<body>
   <p style = "outline:thin solid red; padding:5px;">
      This text is having thin solid red outline.
   </p>
   <br />

   <p style = "outline:thick dashed #009900; padding:5px;">
      This text is having thick dashed green outline.
   </p>
   <br />

   <p style = "outline:5px dotted rgb(13,33,232); padding:5px;">
      This text is having 5x dotted blue outline.
   </p>
</body>
</html>

CSS Outline vs Border

The two obvious differences are that outlines cannot have a hidden style where as a borders can be hidden second an outline can have auto style where as border can't have it. Following table illustrates more differences between outline and border:

Outline	Border
Outline is a non-rectangular shape that surrounds an element, usually with a solid color.	Border is a rectangular shape that is drawn around the content of an element, can be solid, dashed, or dotted, and can have different colors and sizes.
It does not take up any space in the layout and does not affect the size or position of the element.	It affects the size and position of the element, as it adds width to the element.
It is typically used to highlight or emphasize an element, such as when an element is focused or activated.	It can be used for various purposes, such as separating elements, creating boxes, and adding visual emphasis.
It can be created using the outline property in CSS.	It can be created using the border property in CSS.

CSS Outline - Related Properties

You can explore more examples on CSS outline properties by visiting the sub topics listed in the following table:

property	Description
outline	A shorthand property for setting all the outline properties in one declaration
outline-color	Sets the outline color of an element
outline-style	Sets the outline style of an element
outline-width	Sets the outline width of an element
outline-offset	Sets the outline offset of an element