Tutorials Tonight
Follow Us


What is CSS outline?

A line that is drawn around the HTML element and just outside of the border to make the element stand out is CSS outline. CSS outlines are are generally used to create focus on certain area like button, form, links, etc.

You can see outline is around the element but outside black border.
.outline {
    border: 2px solid black;
    outline: 10px solid #5b79a2;
▶ Run the code

The CSS outline has following properties:

  1. outline-style
  2. outline-color
  3. outline-width
  4. outline-offset
  5. outline (shorthand property)

Note: CSS border and CSS outline are two different things. Border is part of HTML element's dimension but outline is not part of element's dimension.

What is difference between border and outline in CSS?

The outline looks very similar to border but it is different from borders. Difference between outline and border are as follows:

CSS outline CSS border
Outline don't take up space and can overlap other elements nearby Borders do take space and does not overlap to other element
Outline do not change shape Border change shape
Outline can't be given different values to different side of it, its same in all direction Borders can be given different value to different side of the border
Outline may have different shapes other than rectangle Borders are rectangle

1. CSS Outline Style

The outline-style property sets a style of an element's outline. Default outline-style is none.

The outline-style can have one following values:

  • solid - It defines solid outline.
  • dashed - It defines a dashed outline.
  • dotted - It defines a dotted outline.
  • double - It defines double outline.
  • groove - It defines 3D grooved outline.
  • inset - It defines 3D inset outline.
  • outset - It defines 3D outset outline.
  • ridged - It defines a 3D ridged outline.
  • none - It defines no outline.
  • hidden - It defines a hidden outline.

p.solid { outline-style: solid; }
p.dashed { outline-style: dashed; }
p.dotted { outline-style: dotted; }
p.double { outline-style: double; }
p.groove { outline-style: groove; }
p.inset { outline-style: inset; }
p.outset { outline-style: outset; }
p.ridge { outline-style: ridge; }
p.none { outline-style: none; }
p.hidden { outline-style: hidden; }
▶ Run the code

2. CSS Outline Color

The outline-color property sets color to outline. The color can be set by any methods like, color name, HEX value, RGB value, HSL value, etc.

Default color of outline is same as text color.

  outline-style: solid;
  outline-color: red;
  outline-style: solid;
  outline-color: rgb(127, 65, 243);
  outline-style: solid;
  outline-color: #23d43c;
▶ Run the code

3. CSS Outline width

The outline-width property sets the thickness of element's outline. outline-width has following values:

  • thin - It defines a outline of generally 1px.
  • medium - It defines a outline of generally 3px.
  • thick - It defines a outline of generally 5px.
  • Any width - It defines a outline in px, pt, cm etc.

.thin {
  outline-width: thin;

.medium {
  outline-width: medium;

.thick {
  outline-width: thick;

.fivepx {
  outline-width: 5px;
▶ Run the code

4. CSS Outline offset

The outline-offset property sets a gap between the border and outline. outline-offset value can be given in any valid unit. Default outline-offset value is 0.

.offset-px {
  outline-offset: 5px;
  outline-offset: 1rem;
  outline-offset: 1cm;
▶ Run the code

5. CSS Outline shorthand property

The outline is a shorthand property for all CSS outline properties, which is used to set multiple outline property values in single line.

Using outline property we can specify one, two or all three values of outline property, where outline-style is required property , outline-width and outline-color are optional property. Order of these three doesn't matter.

.order1 {
  outline: solid;

.order2 {
  outline: solid red;

.order3 {
  outline: solid 10px;

.order4 {
  outline: solid 10px red;
▶ Run the code

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.