HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Set the width of an outline
An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".
The outline-width
specifies the width of an outline.
outline-width
property. An element must have an outline before you change the width of it.
Default value: | medium |
---|---|
Inherited: | no |
Animatable: | yes, see individual properties. Read about animatable Try it |
Version: | CSS2 |
JavaScript syntax: | object.style.outlineWidth="12px" Try it |
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
outline-width | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Value | Description | Demo |
---|---|---|
medium | Specifies a medium outline. This is default | Demo ❯ |
thin | Specifies a thin outline | Demo ❯ |
thick | Specifies a thick outline | Demo ❯ |
length | Allows you to define the thickness of the outline. Read about length units | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Set the width of the outline to medium (this is default):
div {outline-width: medium;}
Set the width of the outline to thin:
div {outline-width: thin;}
Set the width of the outline to 1px:
div {outline-width: 1px;}
Set the width of the outline to 15px:
div {outline-width: 15px;}
CSS tutorial: CSS Outline
CSS reference: outline property
HTML DOM reference: outlineWidth property