how to get that 100% corner smoothing that i've designed in figma ?
hey i'm back AGAIN!!
first two images are the new thing i was trying (it looks good to ME) frontend guy tried it but he can only get that normal corner round thing but cannot get 100% that shows in figma !! WHY ??? there's nothing useful on google or youtube as far as i was able to see. what should we do ?
also the third image is what we're doing. For NOW
15 Replies
try setting 2 values per each corner
CSS can't really do exactly what you're looking for right now but Chrome has
corner-shape: squircle coming in 139. Will look something like this:
only chrome ?
what about other browser
wait chrome means = edge, arc
not quite
edge is, apparently, not chrome enough to be considered separatedly
also, it's usually a step or so behind chrome
what about other browser
you can check yourself
and let me guess it will take apple to add this in safari another 5 year
how
"can i use <insert thing here>" on google
i didn't understand shit
haha
i'ma send medium link to developer
corner shape is being a flag in chrome for now, and no other browser has it (and it might take a while to change as it's currently marked as "not ready to implement" on the spec)
https://caniuse.com/
you can check for browser support on this website, unfortunately corner-shape is so new that they don't have the data yet xD
looks like they hate my idea
you have to search for the property name like "border-radius" or "corner-shape" but the last one is too knew it isn't referenced yet
but TLDR it's not usuable yet in production and wont be for quite some time
when there is an article I'm guessing "squircle" as a search term will probably bring it up as the values will likely be in the summary.
This seems like a perfect case for progressive enhancement. You can probably get a general
border-radius that's relatively close to what you are looking for and then do an @supports for corner-shape: squircle; so that it'll magically fall inline as browsers add support. If that isn't good enough a background-image or border-image is probably the way to go.
Safari worked on an early test implementation of corner-shape at the beginning of the year but the spec has expanded to include a lot more shapes since then. The Safari engineer who will likely work on the implementation was involved in a lot of the CSSWG conversations on this. So it's on their radar at the very least no idea what that means for when it's happening.it's possible to implement this using a clip path/polygon
and using pseudo-elements
instead of having padding on the sides, this should work
there was a pull request added yesterday to get
corner-shape added to can i use: https://github.com/Fyrd/caniuse/pull/7341