outline-width 5g2q15
The outline-width property is used to set the width of an element’s outline. v217
An outline is a line that is drawn outside the outline
property entry for more information about outlines, how they differ from borders, and more.
The outline-width
property is a longhand property that can be specified as part of the shorthand outline
property. It is usually more convenient to set the outline of an element using the shorthand property.
Official Syntax 2f2j3w
- Syntax:
outline-width: thin | medium | thick | <length> | inherit
- Initial: medium
- Applies To: all elements
- Animatable: yes, as a length
Values 445h6m
- thin
- A thin border.
- medium
- A medium border.
- thick
- A thick border.
- <length>
-
See the
<length>
property entry for a list of possible length values. - inherit
- The element inherits its outline width from its parent.
Notes 6p2z1x
The interpretation of the first three values depends on the browser. The following relationships must hold, however:
thin <=medium <= thick
.
Furthermore, these widths must be constant throughout a document.
Examples 5w70f
The following adds a 2px
-width purple outline to input fields when they are focused/tabbed. The color and style of the outline are set using the outline-style
properties.
input[type="text"]:focus { outline-width: 2px; outline-style: solid; outline-color: purple; }
Live Demo 603y6q
The following demo sets the outline width on boxes (<div>
s) with a deepPink outline.
Browser 51c73
The outline-width
property is ed in all major browsers: Chrome, Firefox, Safari, Opera, and on Android and iOS. In Internet Explorer, the property is ed starting from version 8.