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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjMxMjcyMTAsIm5iZiI6MTc2MzEyNjkxMCwicGF0aCI6Ii8xODQwMjk1LzUxNDQzMTM1NS0zNDc3MjYyNC1jY2RjLTQzYmEtODY4MC03ZGQ1ZjkyNDMxZDIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MTExNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTExMTRUMTMyODMwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NTk4MzlhOTY4MzI3MGQ3NzkyM2YyNGQ1M2ZkYWYyMTI0ZjFhNTNjNWFlZjA1NGU2OGEwOWQ4OWZkYjkwYTYyOCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.pyTDsiiHlZC7YjHoh1wXgoJUD-gJufOdxREzoP0-ojY">
> 
> 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.

In this use case, wouldn't you want it the other way around? So you'd have the inner black band implemented as a 2px solid black `border` and then the outer blue band is added as a 2px solid blue `outline` with a 2px `outline-offset`.

Otherwise, wouldn't that cause a layout shift if you added a second border on focus?

But if you did want to implement it with multiple borders and without the layout shift, you'd have to make the outer border transparent initially:

```css
button {
   border-width: 2px / 2px;
   border-style: solid / solid;
   border-color: black / transparent;
}

button:focus-visible {
   border-color: black / blue;
}
```

And that doesn't seem too bad to me. I guess as an author, I don't really mind about the ergonomics because you have the same issue with multiple box-shadows or backgrounds.

-- 
GitHub Notification of comment by JoshTumath
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13044#issuecomment-3532867988 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 13:41:22 UTC