- From: [ Cassondra ] via GitHub <noreply@w3.org>
- Date: Fri, 14 Nov 2025 13:27:50 +0000
- To: public-css-archive@w3.org
<img width="276" height="111" alt="Image" src="https://github.com/user-attachments/assets/34772624-ccdc-43ba-8680-7dd5f92431d2" />
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?
--
GitHub Notification of comment by castastrophe
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13044#issuecomment-3532789169 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:27:51 UTC