Last updated on : 2022-04-10
Outline properties are used to draw a border around an element, but the shape and style of the outline does not affect layout.
Inherited
no
Applies to
all elements
Initial value
outline-color: invert, for browsers supporting it, currentColor for the other outline-style: none outline-width: medium
Animation type
outline-color: a color outline-width: a length outline-style: discrete
Computed value
outline-color: For the keyword invert, the computed value is invert. For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0). outline-width: an absolute length; if the keyword none is specified, the computed value is 0 outline-style: as specified
CSS Basic User Interface Module Level 4 # outline
/* style */
outline: solid;
/* color | style */
outline: #f66 dashed;
/* style | width */
outline: inset thick;
/* color | style | width */
outline: green solid 3px;
/* Global values */
outline: inherit;
outline: initial;
outline: revert;
outline: unset;
Browser Support For Chrome for Android Versions
Browser Support For Firefox for Android Versions
Test your website on 3000+ real browsers and operating systems for mobile and desktop with the LambdaTest cloud. Perform browser compatibility test for CSS outline properties and many more web technologies that are a part of your website or web-application.
Last Modified date
2022-04-10
Data sourced from
Test this and other features on your website for compatibility across
3,000 real browsers and devices using
I hope we're able to help you build browser compatible web experience.
Fast track your browser testing experience on 3000+ browsers and OS combinations with LambdaTest.
Sarah Elson (Product & Growth Lead)