CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



outline-style

The outline-style property is used to set the style of an outline around an element. An outline is a line that is drawn around the outside of an element, outside the border. It is often used to highlight an element or to indicate focus on an interactive element such as a link or form input.

The outline-style property can be used in conjunction with the outline-width and outline-color properties to fully customize the appearance of the outline.

Syntax

The syntax for the outline-style property is as follows:

selector {
  outline-style: value;
}

The value can be one of the following:

  • none: No outline is drawn.
  • solid: A solid line is drawn.
  • dotted: A dotted line is drawn.
  • dashed: A dashed line is drawn.
  • double: A double line is drawn.
  • groove: A 3D groove is drawn.
  • ridge: A 3D ridge is drawn.
  • inset: A 3D inset is drawn.
  • outset: A 3D outset is drawn.
  • inherit: The value is inherited from the parent element.

Examples

Here are some examples of how the outline-style property can be used:

/* No outline */
p {
  outline-style: none;
}

/* Solid outline */
a:focus {
  outline-style: solid;
}

/* Dotted outline */
input:focus {
  outline-style: dotted;
}

/* Dashed outline */
button:focus {
  outline-style: dashed;
}

/* Double outline */
h1:focus {
  outline-style: double;
}

/* 3D groove outline */
div:focus {
  outline-style: groove;
}

/* 3D ridge outline */
span:focus {
  outline-style: ridge;
}

/* 3D inset outline */
ul:focus {
  outline-style: inset;
}

/* 3D outset outline */
li:focus {
  outline-style: outset;
}

Browser Support

The outline-style property is supported by all major browsers.

Conclusion

The outline-style property is a useful tool for adding visual emphasis to an element or indicating focus on an interactive element. By combining it with the outline-width and outline-color properties, you can fully customize the appearance of the outline to suit your needs.

References

Activity