JSFiddle - React, Tailwind, and code Playground
HTML
<div id="blue">
<div id="green">
<div id="yellow">
<div id="red">
</div>
</div>
</div>
</div>
<p>Alternative approach below:</p>
<div id="multiple-borders"></div>
CSS
#blue {
border: 3px solid blue;
border-radius: 60px;
}
#green {
border: 3px solid green;
border-radius: 60px;
}
#yellow {
border: 3px solid yellow;
border-radius: 60px;
}
#red {
border: 3px solid red;
border-radius: 60px;
height: 50px;
}
#multiple-borders {
border: 3px solid red;
border-radius: 60px;
box-shadow: 0 0 0 2px yellow, 0 0 0 4px green, 0 0 0 6px blue;
height: 50px;
}