JSFiddle - React, Tailwind, and code Playground

by dima_k

HTML

<div class="box radius"></div>
<div class="box radius-1"></div>
<div class="box radius-2"></div>
<div class="box radius-3"></div>

CSS

.radius {
    /* Set 20px border-radius to all corners of a box */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

/* Possible shorthands*/
.radius-1 { border-radius: 0 40px; } 
.radius-2 { border-radius: 0 10px 40px; } 
.radius-3 { border-radius: 0 0 40px 40px; }

.box{
    margin: 20px;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background-color: yellow;
    display: inline-block;
}