Last updated: 15 January 2026

Tailwind CSS Ring

Add focus rings in Tailwind CSS with ring-*, ring-offset-*, and ring-{color} utilities. Essential for button focus states, form inputs, and accessible UI design.

Interactive Ring Width Playground

Try each class live and inspect the CSS output.

Utility class
ring-4 ring-emerald-500
CSS output
box-shadow: 0 0 0 4px rgb(16 185 129);

The ring-* utilities in Tailwind CSS create a box-shadow-based outline around elements. Unlike border, rings don't affect layout or element sizing. They're the go-to approach for focus indicators, selection states, and accessible UI feedback.

How to Add a Tailwind Ring

Apply a ring with the ring-{width} class:

  • ring-0 – No ring.
  • ring-1 – 1px ring.
  • ring-2 – 2px ring.
  • ring – 3px ring (default).
  • ring-4 – 4px ring.
  • ring-8 – 8px ring.
HTML
1<button class="ring-2 ring-blue-500 px-4 py-2 rounded-lg">
2  Ringed button
3</button>
ring-1
ring-2
ring (3px)
ring-4
ring-8

Ring Color

Change the ring color with ring-{color}:

HTML
1<button class="ring-2 ring-red-500 px-4 py-2 rounded">Red ring</button>
2<button class="ring-2 ring-green-500 px-4 py-2 rounded">Green ring</button>
3<button class="ring-2 ring-blue-500 px-4 py-2 rounded">Blue ring</button>
ring-red-500
ring-green-500
ring-blue-500
ring-yellow-500
ring-purple-500

Ring Opacity

Control ring transparency with the opacity modifier:

HTML
1<div class="ring-4 ring-blue-500/50 rounded-lg p-4">
2  50% opacity ring
3</div>

Ring Offset

Add space between the element and the ring with ring-offset-{width}:

| Class | Offset | |-------|--------| | ring-offset-0 | 0px | | ring-offset-1 | 1px | | ring-offset-2 | 2px | | ring-offset-4 | 4px | | ring-offset-8 | 8px |

HTML
1<button class="ring-2 ring-blue-500 ring-offset-2 px-4 py-2 rounded-lg">
2  Ring with offset
3</button>
offset-0
offset-2
offset-4
offset-8

Ring Offset Color

Customize the offset background color (useful on non-white backgrounds):

HTML
1<div class="bg-gray-900 p-8 rounded-xl">
2  <button class="ring-2 ring-white ring-offset-2 ring-offset-gray-900 bg-white text-gray-900 px-4 py-2 rounded-lg">
3    Dark background ring
4  </button>
5</div>

Focus Ring Pattern

The most common ring pattern — showing a ring on focus for accessibility:

HTML
1<button class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-all">
2  Focus me (Tab)
3</button>
4

5<input
6  class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none border rounded-lg px-4 py-2"
7  placeholder="Click or tab here"
8/>

Inset Ring

Place the ring inside the element instead of outside:

HTML
1<div class="ring-4 ring-inset ring-blue-500 rounded-lg p-4">
2  Inset ring
3</div>

Responsive Rings

Apply ring styles at specific breakpoints:

HTML
1<button class="md:focus:ring-2 md:focus:ring-blue-500 px-4 py-2 rounded">
2  Focus ring on medium+ screens
3</button>

✏️ Arbitrary Value Usage

Use custom ring widths or colors:

HTML
1<div class="ring-[3px] ring-[#ff6b6b]">
2  Custom ring width and color
3</div>

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe