CSS: outline property
This CSS tutorial explains how to use the CSS property called outline with syntax and examples.
Description
The CSS outline property defines the width, line style, and color of the outline of an element. It is a shorthand property for setting the outline-width, outline-style, and outline-color CSS properties.
Syntax
The syntax for the outline CSS property is:
outline: outline-width outline-style outline-color;Parameters or Arguments
outline-width is optional. It is the width of the outline of an element and can be one of the following:
(If outline-width is not provided, the default is medium)
| 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; } |
outline-style is optional. It is the line style of the outline of an element and can be one of the following:
| Value | Description |
|---|---|
| none | No outline (This is the default) div { outline-style: none; } |
| solid | Single, straight, solid line div { outline-style: solid; } |
| dotted | Series of dots div { outline-style: dotted; } |
| dashed | Series of short dashes div { outline-style: dashed; } |
| double | Two straight lines that total the pixel amount defined by outline-width div { outline-style: double; } |
| groove | Carved effect div { outline-style: groove; } |
| ridge | 3D appearance where outline looks like it is "coming out" (opposite of groove) div { outline-style: ridge; } |
| inset | Embedded appearance div { outline-style: inset; } |
| outset | Embossed appearance (opposite of inset) div { outline-style: outset; } |
| auto | Outline-style is determined by browser div { outline-style: auto; } |
| inherit | Element will inherit the outline-style from its parent element div { outline-style: inherit; } |
outline-color is optional. It is the color of the outline of an element and can be one of the following:
| Value | Description |
|---|---|
| #RRGGBB | Hexadecimal representation of the outline-color div { outline-color: #FF0000; } |
| rgb() | RGB representation of the outline-color div { outline-color: rgb(255,0,0); } |
| name | Name of the outline-color (ie: red, blue, black, white) div { outline-color: red; } |
| invert | Inverts the color of the background div { outline-color: invert; } |
| inherit | Element will inherit the outline-color from its parent element div { outline-color: inherit; } |
Note
- When using the CSS outline property, you can provide any of the outline-width, outline-style, and outline-color values, in any order.
- Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.
Browser Compatibility
The CSS outline property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer 8+ (IE 8+)
- IE Phone 8+
- Opera 7+
- Opera Mobile 6+
- Safari (WebKit)
- Safari Mobile 3.1+
Example
We will discuss the outline property below, exploring examples of how to use this property in CSS with the outline-width, outline-style, and outline-color values.
p { outline: solid black; }In this CSS outline example, we have set the outline to be a solid black line.
You can use the outline property with other tags such as <div> tags. For example:
div { outline: 3px dashed #FF0000; }This outline example would draw a 3 pixel wide, red dashed line around the <div> tag.
Advertisements