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.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.