JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <p>Hello World!!!!<br>
        THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</p>
</div>

CSS

body { background: #d2d1d0; }

#box {
    background: #F4F4F4;
    border: 3px solid blue;
    position: relative;
    height: 100%;
    width: 100%;
}

#box p {
    padding: 10px;
}

#box:before {
    -moz-border-radius: 15px;
    border-radius: 15px;
}

#box {
    -moz-border-radius: 9px;
    border-radius: 9px;
}

#box:after {
    -moz-border-radius: 12px;
    border-radius: 12px;
}

#box:before {
    border: 3px solid red;
    content: '';
    position: absolute;
    top: -9px;
    right: -9px;
    bottom: -9px;
    left: -9px;
}

#box:after {
    border: 3px solid green;
    content: '';
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
}