totn CSS

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

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.