JSFiddle - React, Tailwind, and code Playground

by Harisankaran Parameswaran

HTML

<div class="bordered">Lorem Ipsum Dolor Sit Amet</div>

CSS

.bordered{
    position: relative;
    height: 75px;
    width: 100%;
    background: gray;
    padding-top: 10px;
    margin-top: 20px;
}
.bordered:after{
    position: absolute;
    content: '';
    bottom: -10px;
    left: 0px;
    height: 10px;
    width: 100%;
    background-size: 16px 15px;
    background-position: -5px -5px;
    background-image: -webkit-radial-gradient(50% 100%, circle, transparent 28%, gray 35%);
    background-image: -moz-radial-gradient(50% 100%, circle, transparent 28%, gray 35%);
    background-image: radial-gradient(circle at 50% 100%, transparent 28%, gray 35%);
}
.bordered:before{
    position: absolute;
    content: '';
    top: -10px;
    left: 0px;
    height: 10px;
    width: 100%;
    background-size: 16px 15px;
    background-position: -5px 15px;
    background-image: -webkit-radial-gradient(50% 0%, circle, transparent 28%, gray 35%);
    background-image: -moz-radial-gradient(50% 0%, circle, transparent 28%, gray 35%);
    background-image: radial-gradient(circle at 50% 0%, transparent 28%, gray 35%);
}