outline-style
Quick Summary for outline-style
The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border.
Code Usage for outline-style
/* Keyword values */ outline-style: auto; outline-style: none; outline-style: dotted; outline-style: dashed; outline-style: solid; outline-style: double; outline-style: groove; outline-style: ridge; outline-style: inset; outline-style: outset;  /* Global values */ outline-style: inherit; outline-style: initial; outline-style: revert; outline-style: unset; 
More Details for outline-style

outline-style

The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border.

It is often more convenient to use the shorthand property outline when defining the appearance of an outline.

Syntax

/* Keyword values */ outline-style: auto; outline-style: none; outline-style: dotted; outline-style: dashed; outline-style: solid; outline-style: double; outline-style: groove; outline-style: ridge; outline-style: inset; outline-style: outset;  /* Global values */ outline-style: inherit; outline-style: initial; outline-style: revert; outline-style: unset; 

The outline-style property is specified as any one of the values listed below.

Values

auto

Permits the user agent to render a custom outline style.

none

No outline is used. The outline-width is 0.

dotted

The outline is a series of dots.

dashed

The outline is a series of short line segments.

solid

The outline is a single line.

double

The outline is two single lines. The outline-width is the sum of the two lines and the space between them.

groove

The outline looks as though it were carved into the page.

ridge

The opposite of groove: the outline looks as though it were extruded from the page.

inset

The outline makes the box look as though it were embedded in the page.

outset

The opposite of inset: the outline makes the box look as though it were coming out of the page.

Formal definition

Initial valuenone
Applies toall elements
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

auto | <'border-style'>

Examples

Setting outline style to auto

The auto value indicates a custom outline style, described in the specification as "typically a style [that] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow".

HTML
<div>   <p class="auto">Outline Demo</p> </div> 
CSS
.auto {   outline-style: auto; /* same result as "outline: auto" */ }  /* To make the Demo clearer */ * { outline-width: 10px; padding: 15px; } 
Result

Setting outline style to dashed and dotted

HTML
<div>   <div class="dotted">     <p class="dashed">Outline Demo</p>   </div> </div> 
CSS
.dotted {   outline-style: dotted; /* same result as "outline: dotted" */ } .dashed {   outline-style: dashed; }  /* To make the Demo clearer */ * { outline-width: 10px; padding: 15px; } 
Result

Setting outline style to solid and double

HTML
<div>   <div class="solid">     <p class="double">Outline Demo</p>   </div> </div> 
CSS
.solid {   outline-style: solid; } .double {   outline-style: double; }  /* To make the Demo clearer */ * { outline-width: 10px; padding: 15px; } 
Result

Setting outline style to groove and ridge

HTML
<div>   <div class="groove">     <p class="ridge">Outline Demo</p>   </div> </div> 
CSS
.groove {   outline-style: groove; } .ridge {   outline-style: ridge; }  /* To make the Demo clearer */ * { outline-width: 10px; padding: 15px; } 
Result

Setting outline style to inset and outset

HTML
<div>   <div class="inset">     <p class="outset">Outline Demo</p>   </div> </div> 
CSS
.inset {   outline-style: inset; } .outset {   outline-style: outset; }  /* To make the Demo clearer */ * { outline-width: 10px; padding: 15px; } 
Result

Specifications

Specification
CSS Basic User Interface Module Level 4 # outline-style

See also

outline outline-color outline-width

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語한국어中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
“We ought to take outdoor walks in order that the mind may be strengthened and refreshed by the open air and much breathing.".
Seneca
Random CSS Property

:has()

The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.
:has css reference