outline-width
Quick Summary for outline-width
Code Usage for outline-width
/* 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;
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>
CSS 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; }
ResultSpecifications
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
Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline