CSS: outline-width property
This CSS tutorial explains how to use the CSS property called outline-width with syntax and examples.
Description
The CSS outline-width property defines the width of the outline of an element.
Syntax
The syntax for the outline-width CSS property is:
outline-width: value;
Parameters or Arguments
- value
The width of the outline for an element. It can be one of the following:
Value Description fixed Fixed value expressed in px, em, ...
div { outline-width: 2px; }thin Thin outline-width, which might be 1px or 2px depending on the browser
div { outline-width: thin; }medium Medium outline-width, which might be 3px or 4px depending on the browser
div { outline-width: medium; }thick Thick outline-width, which might be 5px or 6px depending on the browser
div { outline-width: thick; }
Note
- See also the outline-color, outline-style, and outline properties.
Browser Compatibility
The CSS outline-width property has basic support with the following browsers:
- Chrome
- Firefox (Gecko)
- Internet Explorer 8+ (IE8+)
- Opera 7+
- Safari (WebKit)
Example
We will discuss the outline-width property below, exploring examples of how to use this property in CSS with other outline properties.
p { outline-width: thin; outline-style: solid; outline-color: black; }
In this CSS outline-style example, we have set the outline-width to thin which will create a thin solid black line around the text in the <p> tag.
You can use the outline-width property with other tags such as <div> tags. For example:
div { outline-width: 3px; outline-style: dashed; outline-color: #FF0000; }
This outline-style example would draw a 3 pixel wide, red dashed line around the <div> tag.
Advertisements