JSFiddle - React, Tailwind, and code Playground

Border radius Border radius are here, at last, and they are here to stay. Although the have been abused for years, border radius property is more versatile than you can imagine for sure. Let's see some cool effects!

by Jennifer Perrin

HTML

<div></div>
<div class="rounded"></div>
<div class="asymmetric-radius"></div>
<div class="asymmetric-corners"></div>
<div class="percentages"></div>
<div class="sub-properties"></div>
<div class="brackets"></div>

CSS

div {
  width:150px;
  height: 150px;
  margin: 10px;
  float: left;
  
  border: 10px solid #F54;
}

/*
Specify the readius for all corners.
*/
.rounded {
  border-radius: 30px;
}

/*
You can use assymetric radius. Just provide horizontal / vertical.
*/
.asymmetric-radius {
  border-radius: 30px / 90px;
}

/*
You can specify a distinct radius by corner.
*/
.asymmetric-corners {
  border-radius: 90px 60px 30px 5px;
}

/*
You can use percentages...
Hey! It's a circle!
*/
.percentages {
  border-radius: 50%;
}

/*
And you can provide them with sub properties.
*/
.sub-properties {
  border-top-left-radius: 10px;
  /* Note there is no / symbol here! */
  border-bottom-right-radius: 80px 40px;
}

/*
border-radius is not only used for rounding corners.
*/
.brackets {
  border-top: none;
  border-bottom: none;
  border-radius: 30px / 90px;
}