CSS: outline-style property
This CSS tutorial explains how to use the CSS property called outline-style with syntax and examples.
Description
The CSS outline-style property defines the outline style of an element, which is a line that is drawn outside the border edge of an element.
Syntax
The syntax for the outline-style CSS property is:
outline-style: value;
Parameters or Arguments
- value
The line style of the outline for an element. It 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; }
Note
- See also the outline-color, outline-width, and outline properties.
Browser Compatibility
The CSS outline-style property has basic support with the following browsers:
- Chrome
- Firefox (Gecko)
- Internet Explorer 8+ (IE 8+)
- Opera 7+
- Safari (WebKit)
Example
We will discuss the outline-style property below, exploring examples of how to use this property in CSS with other outline properties.
p { outline-style: solid; outline-color: black; }
In this CSS outline-style example, we have set the outline-style to solid which will create a solid black line around the text in the <p> tag.
You can use the outline-style property with other tags such as <div> tags.
For example:
div { outline-style: dashed; outline-color: #FF0000; }
This outline-style example would draw a red dashed line around the <div> tag.
We could modify the example above and apply stying to the outline-width property as follows:
div { outline-style: dashed; outline-color: #FF0000; outline-width: thick; }
This example would change our outline to a thick red dashed line.
Advertisements