w3c/csswg-drafts

[css-logical-props] `border‐radius`

zamfofex opened this issue · 5 comments

zamfofex commented

border‐radius was left out of css-logical-props for no aparent particularly good reason.

I think the following properties should be present in the spec:

border-start-start-radius

border-start-end-radius

border-end-start-radius

border-end-end-radius

The first part would be related to the block axis and the second part to the inline axis.

And alternative would be border-block-start-inline-start-radius, but that feels unnecessarily verbose.

chharvey commented

I would also suggest adding the following shorthands, if you want to put a border-radius on only one side of a box. Each shorthand syntax would be:

<length-percentage>{1,2} [ / <length-percentage>{1,2} ]?

Similar to the border-radius shorthand, each <length-percentage>{1,2} represents a radius, horizontal or vertical (more accurately, inline-axis or block-axis), of an ellipse. The slash separates ellipse radii, not corners of the box.

property shorthand for
border-block-start-radius border-start-start-radius border-start-end-radius
border-block-end-radius border-end-start-radius border-end-end-radius
border-inline-start-radius border-start-start-radius border-end-start-radius
border-inline-end-radius border-start-end-radius border-end-end-radius

examples:

.a {
  border-block-start-radius: 11px;
  /* equivalent to: */
  border-start-start-radius: 11px;
  border-start-end-radius: 11px;
}
.b {
  border-block-start-radius: 11px 22px;
  /* equivalent to: */
  border-start-start-radius: 11px;
  border-start-end-radius: 22px;
}
.c {
  border-block-start-radius: 11px / 22px;
  /* equivalent to: */
  border-start-start-radius: 11px 22px;
  border-start-end-radius: 11px 22px;
}
.d {
  border-block-start-radius: 11px 22px / 33px 44px;
  /* equivalent to: */
  border-start-start-radius: 11px 33px;
  border-start-end-radius: 22px 44px;
}
.e {
  border-block-start-radius: 11px 22px / 33px;
  /* equivalent to: */
  border-start-start-radius: 11px 33px;
  border-start-end-radius: 22px 33px;
}
.f {
  border-block-start-radius: 11px / 22px 33px;
  /* equivalent to: */
  border-start-start-radius: 11px 22px;
  border-start-end-radius: 11px 33px;
}
  • 👍2
fantasai commented

It was left out because css-logical is mainly about the CSS2-level properties: newer modules are expected to define their logical features themselves, and for css-backgrounds that will be in Level 4.

chharvey commented

Another thing to consider is the order of the two-value syntax for ellipse radii.

In the current spec, border-top-left-radius: 55px 25px; sets the x-radius (horizontal) to 55px and y-radius (vertical) to 25px. However if we want to use the convention "block before inline" this may have to be reconsidered.

Here's an example of why we would want it to change based on writing mode. Let’s say that no matter what the writing mode, we want the block-direction to be 25 and inline-direction to be 55.

.alert {
  background: pink;
  border: 1px solid red;
  border-top-left-radius: 55px 25px; /* horizontal/inline-direction = 55, vertical/block-direction = 25 */
}
/* must switch for Han-based writing modes */
.japanese .alert {
  border-top-left-radius: 25px 55px; /* horizontal/block-direction = 25, vertical/inline-direction = 55 */
}

Also it would be much more consistent to have Y before X for everything, so authors don't have to remember which properties are “X before Y” (like background-size) and which are “Y before X” (like margin). But I think that's more of a theoretical advantage than a practical one.

SebastianZ commented

@zamfofex The properties suggested by you already made it into the spec. in the meantime.

@chharvey:

I would also suggest adding the following shorthands, if you want to put a border-radius on only one side of a box.

Those were added to CSS Borders 4.

Another thing to consider is the order of the two-value syntax for ellipse radii.

Browsers shipped the properties with the horizontal-first syntax a long time ago. So changing the order now would be web-incompatible.

I think it's safe to close this issue now. If I am missing something, please feel free to reopen it or file new issues.

Sebastian