Border

Ring Color

Utilities for setting the color of outline rings.

Basic usage

Use the ring-{color} utilities to set the color of an outline ring.

<button className="... ring-2 **ring-blue-500**">
  Create account
</button>

Control the opacity of an element's background color using the color opacity modifier.

<button className="... ring-2 ring-blue-500**/50**">Subscribe</button>

You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.

<button className="... ring-2 ring-blue-500**/[.55]**">Subscribe</button>