CSS Outlines

CSS Outlines

CSS outlines are lines that are drawn around elements, outside the borders. Outlines are similar to borders, but they differ in a few significant ways:

• Outlines do not take up space.
• Outlines can be non-rectangular.

Outlines are defined by the following properties:

Outline Style

The outline-style property is used to specify the style of the outline. It can take the following values: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

p {  outline-style: solid;}

In this example, the outline style of the p element is set to solid.

Outline Color

The outline-color property is used to specify the color of the outline.

p {  outline-color: red;}

In this example, the outline color of the p element is set to red.

Outline Width

The outline width property is used to specify the width of the outline. The width is specified in either length units (like px, em, etc.) or by using one of the three pre-defined values: thin, medium, or thick.

p {  outline-width: 2px;}

In this example, the outline width of the p element is set to 2 pixels.

Outline Offset

The outline-offset property is used to specify the space between an outline and the edge or border of an element. The offset is specified in length units.

p {  outline-offset: 15px;}

In this example, the outline offset of the p element is set to 15 pixels.

Shorthand Property: Outline

The outline property is a shorthand property for setting outline-width, outline-style, and outline-color in a single declaration. If one of the three properties is not specified, the default value will be used.

p {  outline: 2px solid red;}

In this example, the p element is given a red, solid outline that is 2 pixels wide.