JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">I have nasty corner leakage. (check safari)</div>
<div class="box clip"> I keep my corners in order.</div>
<div class="box overflow"> I keep my corners in order via overflow:hidden.</div>

CSS

.box {
    background-color:#000;
    border: solid 3px red;
    width:100px;
    height:100px;
    color: white;
    padding: 10px;
    margin-bottom:30px;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
}
.clip {
       -moz-background-clip: padding; /* FF1-3.6 */
    -webkit-background-clip: padding-box; /* Saf3+ */
            background-clip: padding-box; /* FF4, Chrome, Opera 10.5, IE9 */
}
.overflow { overflow:hidden; }