Ring Width
Utilities for controlling the width of an element's ring.
❗ Keep in mind
To establish rings, it's essential to commence class declarations with ring.
To apply ring widths, use the following classes to define the desired width. The ring will be applied around the element based on the specified width.
| Class Name | CSS Equivalent |
|---|---|
| ring | --c-ring-width: 2px; --c-ring-offset-width: 3px; --c-ring-shadow: 0 0 0 calc(var(--c-ring-offset-width) + var(--c-ring-width)) rgba(var(--c-ring-color), 1); --c-ring-offset-shadow: 0 0 0 var(--c-ring-offset-width) rgba(var(--c-ring-offset-color), 1); box-shadow: var(--c-ring-offset-shadow), var(--c-ring-shadow), var(--cds-sys-elevation-box-shadow, 0 0 0 0 #000); |
| ring-0 | --c-ring-width: 0px; |
| ring-1 | --c-ring-width: 1px; |
| ring-2 | --c-ring-width: 2px; |
| ring-4 | --c-ring-width: 4px; |
| ring-8 | --c-ring-width: 8px; |
Setting Ring Width on Elements
Use the ring-{width} utilities to set the ring width for an element. The default is ring-2. Mostly you'll apply only the ring class.
html
<div class="[...] ring ring-2">ring-2</div>
<div class="[...] ring ring-4">ring-4</div>
<div class="[...] ring ring-8">ring-8</div>Focus Rings
The ring width utilities make it easy to use custom focus rings by adding focus: or focus-visible: to the beginning of any ring-{width} utility.
html
<button class="[...] outline-none focus-visible:ring transition-all">Save changes</button>