outline-width
Quick Summary for outline-width
Code Usage for outline-width
<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">outline-width</span><span class="token punctuation">:</span> thin<span class="token punctuation">;</span> <span class="token property">outline-width</span><span class="token punctuation">:</span> medium<span class="token punctuation">;</span> <span class="token property">outline-width</span><span class="token punctuation">:</span> thick<span class="token punctuation">;</span> <span class="token comment">/ <length> values /</span> <span class="token property">outline-width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token property">outline-width</span><span class="token punctuation">:</span> 0.1em<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">outline-width</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">outline-width</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">outline-width</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">outline-width</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
More Details for outline-width
outline-width
The CSS outline-width property sets the thickness 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-width: thin; outline-width: medium; outline-width: thick; /* <length> values */ outline-width: 1px; outline-width: 0.1em; /* Global values */ outline-width: inherit; outline-width: initial; outline-width: revert; outline-width: unset; The outline-width property is specified as any one of the values listed below.
Values
<length> The width of the outline specified as a <length>.
thin Depends on the user agent. Typically equivalent to 1px in desktop browsers (including Firefox).
medium Depends on the user agent. Typically equivalent to 3px in desktop browsers (including Firefox).
thick Depends on the user agent. Typically equivalent to 5px in desktop browsers (including Firefox).
Formal definition
| Initial value | medium |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | an absolute length; if the keyword none is specified, the computed value is 0 |
| Animation type | a length |
Formal syntax
<line-width>where
<line-width> = <length> | thin | medium | thick
Examples
Setting an element's outline width
HTML<span id="thin">thin</span> <span id="medium">medium</span> <span id="thick">thick</span> <span id="twopixels">2px</span> <span id="oneex">1ex</span> <span id="em">1.2em</span> span { outline-style: solid; display: inline-block; margin: 20px; } #thin { outline-width: thin; } #medium { outline-width: medium; } #thick { outline-width: thick; } #twopixels { outline-width: 2px; } #oneex { outline-width: 1ex; } #em { outline-width: 1.2em; } Specifications
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-width |
See also
outline outline-color outline-style Select your preferred language English (US)EspañolFrançais日本語한국어中文 (简体) Change language
Add Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
