Button with inverted rounded corners + border
I am trying to recreate the attached button in CSS. This button has inverted rounded corners with also a border on the whole button (also on the corners). I am able to create the rounded corners but I am with the borders.
You can see what I have here: https://codepen.io/Rultar/pen/emOWqBx
12 Replies
Thanks!
Actually, you could just do this xD
here my try with a single element, using masks and gradients
https://codepen.io/MarkBoots/pen/YPKVmMQ
don't touch the scary bit 😜
desperately needs variables but here's my attempt: https://codepen.io/jsnkuhn/pen/OPLmKKE
there's also this generator: https://css-generators.com/custom-corners/
CSS Generator for Custom Corners (Scooped, Beveled, and more)
Cut the corners of your element using CSS mask or clip-path. Get an optimized & modern code in no time.
you just let me feel really dumb 😁 , offcourse i could have just used the repeating nature of backgrouds/mask. just offset it a bit.... (never code after midnight)
sorry didn't see yours
i've updated mine with your approach and the variables
https://codepen.io/MarkBoots/pen/YPKVmMQ
can someone tell me whats the easiest noob friendly method 🙂 ?
approach*
so here's another approach that gets out of the way of
background-image so peeps can use that: https://codepen.io/jsnkuhn/pen/MYgoKOZ
you have touched on the primary problem here: there unfortunately isn't really a "nooby friendly" method for this. There's this mythical CSS property called "border-corner-shape" that's been in a draft spec for 12 years but it has never been implemented by any browsers.... Here's my paintAPI take on what it would be like: https://jsnkuhn.github.io/corner-shape/ it's pretty rough because the paintAPI also has bad support. Looking at it on chrome or edge should give the best results.
if you're OK with using images for this border-image can be helpful. The big issue is that you lose control of most styling through CSS: https://codepen.io/jsnkuhn/pen/eYMQmoei thought of border-image too, but if you want a wider line (wherefor you also use the inset shadow), it will start to cover the padding- and content-box as well.
i was thinking of adding a transparent border so it creates the space for it, but then the inset shadow won't line up. unfortunately it's not possible to combine multiple border-images so it can also do the horizontal/vertical line
It could work with an outline instead of the inset shadow
https://codepen.io/MarkBoots/pen/YPKQwbQ?editors=1100