Re: [csswg-drafts] [css-borders] allow multiple borders (#13044)

> <img alt="Image" width="276" height="111" src="https://private-user-images.githubusercontent.com/1840295/514431355-34772624-ccdc-43ba-8680-7dd5f92431d2.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjMxMzI0NDUsIm5iZiI6MTc2MzEzMjE0NSwicGF0aCI6Ii8xODQwMjk1LzUxNDQzMTM1NS0zNDc3MjYyNC1jY2RjLTQzYmEtODY4MC03ZGQ1ZjkyNDMxZDIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MTExNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTExMTRUMTQ1NTQ1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NDljNzRmM2ExNjVkMWIyOTAzNWM4OTc2NmE1NWNjYmRjYzM4OGY4YWYzNWNiYTc3Njk4ZDJmMThkMmE0MjhmZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.qFsed0mH-6HPe06nmHSVrt6lSwYMrIJGra8Ul4xks10">
> In this use-case, we have a button styled with an outline (2px solid black, border radius: 16px). When focused, we add a secondary border around it (2px solid blue). Currently it uses a pseudo and a box-shadow to accomplish this but let's assume we want to use this double border syntax to apply the styles.
> 
> ```
> button {
>    border-width: 2px;
>    border-style: solid;
>    border-color: black;
> }
> 
> button:focus-visible {
>    border-width: 2px / 2px;
>    border-style: solid / solid;
>    border-color: black / blue;
> }
> ```
> 
> This syntax still just doesn't feel ergonomic yet. Why do I have to redefine the first border in order to add the second? How do I define the offset distance between the borders? What if I want to animate the second border's offset so it feels like a bounce?

This looks like an outline to me, with an outline-offset — which is how focus rings are typically done. That also avoids the issue of things jumping around due to the border box changing. No multi-border syntax is going to provide better ergonomics. 

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13044#issuecomment-3533170848 using your GitHub account


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

Received on Friday, 14 November 2025 14:58:50 UTC