CSS Rounded Corners

When it comes to web design, little details can make a big difference. One easy way to add a touch of class is by using CSS rounded corners.

Instead of square-ish and sharp edges, rounded corners give your elements a softer, more inviting look. And it’s very easy to do it with CSS. Use the border-radius property in your CSS:

.element {
  border-radius: 10px;
}

That’s how you get rounded edges with CSS.

Adjust the value 10px of the border-radius property to a higher or lower value of roundness.

You can also make circles by setting a 50% percentage value:

.circle {
  border-radius: 50%;
}

If you want to go even further, it’s possible to customize the border-radius of each of the four corners:

.element {
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 0px;
}

It gets more advanced when you mix this with percentages:

.element {
  border-top-left-radius: 0px;
  border-top-right-radius: 100%;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 0px;
}

Have fun!