Corners
The Border Radius Property
The border-radius property allows you to style each of the four corners using CSS.
With this, you can:
- Round all four corners of an element
- Round individual corners of an element
- Make ovals
- Make circles
To round all four corners of an element, use:
border-radius: 20px;
and your corners will all be the same roundedness.
You can also use a percentage instead of px, like this: border-radius: 20%; but on a rectangle, it'll look funky because it takes the percentage of the width and the percentage of the height.
There are also properties for each individual corner, like this: border-top-left-radius: 20px;
And you can also do border-top-right-radius: 20px;
Or border-bottom-right-radius: 20px;
Or border-bottom-left-radius: 20px;
Or, more conveniently, there is a shorthand for all four corners in the simple "border-radius" property. The values start at the top left-hand corner and move around clockwise. border-radius: 10px 30px 50px 70px;
To make an oval, start with a rectangle and then round the corners.
You can round the corners with a really giant pixel number,
or with a percentage that is at least 50%.
This oval is using border-radius: 100%;
Making a circle is exactly the same as making an oval,
except that you need to start with a perfect square.
More Corners
Adding a slash for organic shapes
The spec about border-radius says if you add a slash to your values, then "the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally." W3C
border-radius: 70% 30% 30% 7% / 60% 40% 60% 40%;
You can learn more about how the percentages work at this article from 9elements.
Even More Corners
So many more crazy things
There used to be a border-corner-shape property, but it is now depricated.
However, there are SO many more cool things you can do
with corners using just html and css.
You can check out these ideas from freefrontend.com