Ring width
Utilities for creating outline rings with box-shadows.
Class reference
Usage
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.
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 focus
variant is enabled for ring-{width}
utilities by default, which makes it easy to use them for custom focus styles by adding focus:
to the beginning of any ring-{width}
utility.
The focus
variant is enabled by default for the ring color, ring opacity, ring offset width, and ring offset color 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.
Responsive
To control the ring width at a specific breakpoint, add a {screen}:
prefix to any existing ring width utility. For example, use md:ring-4
to apply the ring-4
utility at only medium screen sizes and above.
<button class="ring-2 md:ring-4">
<!-- ... -->
</button>
For more information about Elements’ responsive design features, check out the Responsive Design documentation.
On this Page
v1.13.5