CSS Outline
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element “stand out”. Outlines are very similar to borders, but there are few major differences as well −
- An outline does not take up space.
- Outlines do not have to be rectangular.
- Outline is always the same on all sides; you cannot specify different values for different sides of an element.
CODE:
Result:
CSS has the following outline properties:
- The outline-width property is used to set the width of the outline.
- The outline-style property is used to set the line style for the outline.
- The outline-color property is used to set the color of the outline.
- The outline property is used to set all the above three properties in a single statement.
1. The outline-width
The outline-width property specifies the width of the outline to be added to the box. Its value should be a length or one of the values thin, medium, or thick, just like the border-width attribute.
CODE:
Result:
2. The outline-style
The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element. It can take one of the following values −
- none − No border. (Equivalent of outline-width:0;)
- solid − Outline is a single solid line.
- dotted − Outline is a series of dots.
- dashed − Outline is a series of short lines.
- double − Outline is two solid lines.
- groove − Outline looks as though it is carved into the page.
- ridge − Outline looks the opposite of groove.
- inset − Outline makes the box look like it is embedded in the page.
- outset − Outline makes the box look like it is coming out of the canvas.
- hidden − Same as none.
CODE:
Result:
3. The outline-color
The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.
CODE:
Result:
4. The outline Property-Shorthand property
The outline property is a shorthand property that allows you to specify values for any of the three properties discussed previously in any order but in a single statement.
CODE:
Result:
CSS Outline Offset
The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.
CODE:
Result:
All CSS Outline Properties
You may also like: CSS Box Model