[csswg-drafts] [css-borders-4] Merge `border-limit` and `border-clip-*`? (#9634)

SebastianZ has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-borders-4] Merge `border-limit` and `border-clip-*`? ==
Currently, we have two properties that influence how parts of the border are drawn.
`border-limit` allows to specify which parts of a border to draw (everything or only specific sides or only the corners).
The `border-clip-*` properties allow to clip specific parts of the border after drawing it.

As they are covering similar use cases, I suggest we merge the features of `border-limit` into `border-clip-*`.

The syntax would then be

```ebnf
normal | sides | corners | [ <length-percentage [0,∞]> | <flex> ]+
```

Where `sides` clips the sides up to but not including the corners and `corners` clips the corners.
Clipping is obviously the opposite of of limiting the drawing, though with the above authors can achieve the same effects as `border-limit`.

Here are examples for how the syntax above covers the use cases of `border-limit`:

`border-clip: normal` = `border-limit: all`
`border-clip: sides` = `border-limit: corners`
`border-clip: corners` = `border-limit: sides`
`border-clip-top: 100%; border-clip-right: 100%; border-clip-bottom: 100%; ` = `border-limit: left`
`border-clip: 0 1fr 50% 1fr` = `border-limit: sides 50%`

Even without introducing the `sides` and `corners` keywords, authors could achieve the same effect when they know the border radius. E.g.

`border-clip: var(--border-radius) 1fr` = `border-limit: corners`
`border-clip: 0 var(--border-radius) 1fr` = `border-limit: sides`

If we want to use keywords, we need to discuss their names, because `border-clip-top: sides` sounds wrong.

Sebastian

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9634 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 25 November 2023 22:19:18 UTC