CSS outline-width Property

Description

The outline-width property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

Initial value

medium

Applies to

All elements

Inherited

Yes

Media

Visual

Computed value

Absolute length; '0' if the outline style is 'none'

Animatable

No

CSS Version

CSS2, CSS3

JavaScript syntax

object.style.outlineWidth

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

<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-style: dotted; 
   outline-width: 3px; 
   outline-color: blue;
   padding: 10px; 
}

Browser Support

Desktop
8	12	1	1.5	7	1.2
Tablets / Mobile
37	18	4	14	1	1.0

Last updated by CSSPortal on: 3rd November 2019