Why ring instead of border?

[pspeter3]

Rings are 1px by default — the ring utility used to be a 3px blue ring by default, now it’s a 1px ring using currentColor. We find ourselves using the ring-* utilities as an alternative to borders in our projects, and using outline-* for focus rings, so we think making things consistent here is a helpful change.

https://tailwindcss.com/blog/tailwindcss-v4-alpha

[tryoxiss]

Ring works by creating a box shadow around the element with a cutoff point. Shadows are not in the documents flow, but borders are. This means that adding a border affects the layout, but adding a ring does not.

Outline is also out of the flow, but is often used for focus states. Using ring instead for most things leaves that property open to be assigned by focus.

https://tailwindcss.com/docs/ring-width

[pspeter3]

I'm curious if they have an example button or other component that uses ring instead border. Do you know if Tailwind UI or Catalyst uses this pattern?

[tryoxiss]

I don't know if they do. A bit of an ugly sample but here is a demo of how I believe it is meant to be used: https://play.tailwindcss.com/eidUc7DDlJ

[adamwathan]

@pspeter3 We still use borders a ton, what I meant by that comment is that when we do use ring-* it's usually as an alternative to border, rather than as a focus ring. We use outline-* for focus rings most of the time now. So instead of the ring utility being optimized for focus rings by default (which is where the 3px width came from), we're optimizing for using it as a stroke/border by default, and making it 1px so it's more consistent with the border and outline utilities. Using 3px felt like a weird magic number, 1px as a default just feels less surprising I think.

[adamwathan]

Here's an example from our recent Radiant template:

This card doesn't actually have a border, it has a 1px ring. We use a ring instead of a border here because we want it to blend with the box shadow on the element, so that the ring/border is darker at the bottom and lighter at the top 👍

[pspeter3]

Ah got it, thanks! I wasn't sure if there was a reason to avoid border for box sizing purposes.