JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<div id="b1">СВЕРХУ</div>
<div id="b2">СНИЗУ</div>
<div id="b3">СЛЕВА</div>
<div id="b4">СПРАВА</div>

CSS

div {
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    border: 1px solid #900;
    margin: 10px;
}
#b1 {
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px;
}
#b2 {
    border-bottom-left-radius: 20px; 
    border-bottom-right-radius: 20px;
}
#b3 {
    border-bottom-left-radius: 20px; 
    border-top-left-radius: 20px;
}
#b4 {
    border-bottom-right-radius: 20px; 
    border-top-right-radius: 20px;
}