tutorialstonight logo
A Platform To Learn To Code

CSS OUTLINE



A line that is drowned just outside of the border to make the element stand out is outline.

The CSS outline has following properties:

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

Example

Run the code

Difference between outline and border

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

Outline Border
Outline don't take up space Borders do take space
Outline do not change shape Border change shape
Outline can't be given different values to different side of it Borders can be given different value to different side of the border
Outline may have different shapes other than rectangle Borders are rectangle


1).Outline Style

The outline-style property sets a different style of outline look.

The outline-style have 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.

Example

Run the code

2.) Outline Color

The outline-color property sets color to outline look.Color can be set by color name,HEX value,RGB value and HSL value.

Example

Run the code

3.) Outline width

The outline-width property sets width to outline look.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.

Example

Run the code

4.) Outline offset

The outline-offset property sets a gap between the border and outline.

Example

Run the code

5).Outline shorthand property

The outline is a shorthand property which is used to set multiple outline property values.

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

Example

Run the code



BOX

BOX