Nils Binder has the scoop on how to manipulate elements by using border-radius by passing eight values into the property like so:
.element {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}This is such a cool technique that he also developed a tiny web app called Fancy-Border-Radius to see how those values work in practice. It lets you manipulate the shape in any which way you want and then copy and paste that code straight into your designs:
Cool, huh? I think this technique is potentially very useful if you don’t want to have an SVG wrapping some content, as I’ve seen a ton of websites lately use “blobs” as graphic elements and this is certainly an interesting new way to do that. But it also has me wondering how many relatively old and familiar CSS properties have something sneaky that’s hidden and waiting for us.
We’ve got a tool for playing as well that might help you understand the possibilities:
See the Pen All the border-radius’ by Chris Coyier (@chriscoyier) on CodePen.
I’m an absolute beginner, really first time. I understand the box-radius property, but where the hell in the style.css should I put it? my aim is that all the content boxes from the blog landing page have round corners but even if I try to put this in all the elements that remind me to the box (content box, box wrapper) the borders keep the same or the only one that changes is the button of this content box saying read more…
I know it might be a silly question but I do not find it anywhere.
Thank you
Hey Tam, great question! You’ll want to add border-radius on the element that is container of what’s being rounded.
So, for example, let’s we have an element with a class name of “box” and it has some content inside of it.
This is a box
This is content inside of the box.
In CSS, we would target the
.boxelement since it is the container for the content..box {background-color: red;
border-radius: 20px;
color: white;
padding: 2em;
}
Here’s how that shakes out: https://codepen.io/geoffgraham/pen/PVboLG