CSS outline-width Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The outline-width CSS property is used to specify the width of the outline that surrounds an element when it gains focus or is activated. It is commonly used in conjunction with the outline-style and outline-color properties to customize the appearance of the outline. Outlines are typically used to enhance the accessibility and usability of interactive elements on a webpage, such as links and form elements, by providing a visible indication of focus without altering the layout of the page. The outline-width property accepts values in various units, such as pixels, ems, or percentages, allowing developers to control the thickness of the outline according to their design preferences and accessibility requirements.

Initial value: medium
Applies to: All elements
Inherited: Yes
Computed value: Absolute length; '0' if the outline style is 'none'
Animatable: No
JavaScript syntax: object.style.outlineWidth

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.

Syntax

outline-width: <border-width> | inherit

Values

thinLess than the default width.
thickGreater than the default width.
mediumDefault value.
<border-width>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
inherit

Example

HTML

<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>

CSS

.block { 
   outline-style: dotted; 
   outline-width: 3px; 
   outline-color: blue;
   padding: 10px; 
}

Result

Editor

Browser Support

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

Desktop

12	1	1.5	7	1.2

Tablets / Mobile

18	4	14	1	1	37

Last updated by CSSPortal on: 2nd January 2024

Support Us