The Logical Border Radius Equivalents

Chris CoyierDecember 2, 2024About 2 min

The Logical Border Radius Equivalents 관련

I find this hard to remember and it’s come up for me a few times lately so I’m writing it down gosh darn it! The individual corner border-radius values, like border-top-right-radius (which is hard enough to remember on its own) have logical property versions, meaning that should the flow of the document change, the border […]

I find this hard to remember and it’s come up for me a few times lately so I’m writing it down gosh darn it!

The individual corner border-radius values, like border-top-right-radius (which is hard enough to remember on its own) have logical property versions, meaning that should the flow of the document change, the border radius values should come along for the ride.

border-top-right-radius = border-start-end-radius
border-top-left-radius = border-start-start-radius
border-bottom-right-radius = border-end-end-radius
border-bottom-left-radius = border-end-start-radius

(By “equivalent” I mean the these turn out the same in left-to-right, top-to-bottom languages like English, Spanish, French, etc. In other directional situations, these are not equivalent, which is kinda the point.)

The syntax is:

border-<BLOCK_DIRECTION>-<INLINE_DIRECTION>-radius

You’d choose the logical versions if you were using border-radius on elements where the flow was relevant. Here’s an example of a “tag” shape (chriscoyier) on some inline text, and you’d potentially want the direction to flip.

If border-radius is being applied entirely as an aesthetic thing and it makes more sense to apply physical directionality rather than text-flow directionality, which is entirely common, feel free to use the classic properties.

I feel these newer logical properties for border-radius took an understandability hit, as while “border-top-right-radius” is hard to remember because of trying to remember the right order of the words, at least once you’ve got it, it’s clear where that radius is going to apply. Whereas with “border-start-end-radius” you just have to know (or guess and test) which direction “start” applies to and which direction “end” applies to.

Something like border-inline-start-block-end-radius would solve that, but I do understand that is an awfully long property name and might suffer from confusion. If someone accidentally mentally grouped it like “border-inline” “start-block” “end-radius”, that’s, uh, a meaningless jumble.

There is an interesting gotcha Michelle Barker found in Logical Border Radius with vertical writing modes, so if that comes up for you read what she’s got to say there.

The Logical Border Radius Equivalents