Border Color

Basic Usage

Adding a ring

Use the ring-{width} utilities to apply solid box-shadow of a specific thickness to an element. Rings are a semi-transparent blue color by default, similar to the default focus ring style in many systems.

<button className="... ring-offset-2 **ring-2**">Button A</button>
<button className="... ring-offset-2 **ring**">Button B</button>
<button className="... ring-offset-2 **ring-4**">Button C</button>

Ring utilities compose gracefully with regular shadow-{size} utilities and can be combined on the same element.

You can also control the color, opacity, and offset of rings using the ringColor, ringOpacity, and ringOffsetWidth utilities.

Focus rings

The ring width utilities make it easy to use custom focus rings by adding focus: to the beginning of any ring-{width} utility.

<button className="... **focus:ring-2**">Save Changes</button>

The focus variant is enabled by default for the ringColor, ringOpacity, ringOffsetWidth, and ringOffsetColor utilities as well.

Inset rings

Use the ring-inset utility to force a ring to render on the inside of an element instead of the outside. This can be useful for elements at the edge of the screen where part of the ring wouldn't be visible.

<button className="... ring-2 ring-pink-300 **ring-inset**" dark-className="... ring-2 ring-pink-500 **ring-inset**">
  Save Changes
</button>