CSS outline Property


The outline CSS property is used to style the outline that appears around an element when it is focused or active, typically due to user interaction, such as clicking with a mouse or tabbing through form fields. It allows web developers to customize the appearance of this outline, including its color, style, and width. The outline property is often used in conjunction with the :focus pseudo-class to enhance accessibility and usability by making interactive elements more visually distinct when they receive keyboard or mouse focus, ensuring a better user experience for those with disabilities or using assistive technologies. Individual properties are: outline-style, outline-width and outline-color.

Initial value
Based on individual properties
Applies to
All elements
Computed value
See individual properties
JavaScript syntax

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.


outline: [ <outline-color> || <outline-style> || <outline-width> ] | inherit 


  • <outline-color>See the outline-color CSS property for values.
  • <outline-style>See the outline-style CSS property for values.
  • <outline-width>See the outline-width CSS property for values.
  • inherit


<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
.block { 
   outline: 3px dotted blue; 
   padding: 10px; 

Browser Support

The following table will show you the current browser support for the CSS outline property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024