Gregory's ServerWe implemented a new value for `background-clip` called `border-area`. It lets you use CSS fill a border with a background image or gradient.
This article explains how it works, and shows up the possibilities in 7 demos.
 15 comments
I’d love to hear what you think of `background-clip: border-area`. What will you do with it? `background-clip: border-area` is a great example of something that you can use today — even though it’s only supported in Safari. Progressive enhancement techniques let you ship something using it now, while supporting all users! When other browsers add support, more users will see the result. The most powerful part of `background-clip: border-area` might just be what you can do with a round box and conic-gradient background on its border. Especially if you animate it using `@property`! See the code: https://codepen.io/jensimmons/pen/OJKBmyP?editors=1100 I put all of the demos in one place on CodePen. https://codepen.io/collection/jONBky Be sure to try them out in Safari Technology Preview, Safari 18.2 beta, or *perhaps* the version of Safari you have right now after enabling a flag. (The demos will tell you if your browser has support or not.)   @jensimmons My guess is that the border-area + text is going to be used a lot more than just border-area, and having that be more ergonomic would be great. @Kilian +1! We’ve been opening issues at the CSSWG to make it more ergonomic — and two decisions were recently made to improve things. Be sure to read the section titled “Future changes coming” to learn about the details. Direct link: https://webkit.org/blog/16214/background-clip-border-area/#:~:text=Future%20changes%20coming @jensimmons just to bikeshed my own request, something like "background-clip: punch-through" would be nice. @Kilian Ha! Yeah, it’s more like: ```  @jensimmons I saw this come up on the WebKit RSS feed earlier - great article! The examples and the way you progressively explain each property are really helpful in understanding how to use it! @jensimmons I don't agree that the default should be `background-origin: border-box`. If you are using regular borders, you want the background to fit the padding box to avoid extra cropping. |
@jensimmons Love this! đź‘Ź Very useful value. Hopefully other browsers follow suit with this.