css - Compensate for Safari's Border Radius Drawing -

observe below simple example:

div {    border-bottom: 1px solid black;    border-radius: 20%;    padding: 10px;  }

<div>test</div>

in safari, causes part of upper borders drawn:

i don't want "ghosted" upper borders. how compensate this?

you need remove rounded border on top side of div so:

div {     border-bottom: 1px solid black;     border-radius: 0 0 20% 20%;     padding: 10px; }

this using border-radius shorthand 4 values where

first value applies top-left, second value applies top-right, third value applies bottom-right, , fourth value applies bottom-left corner"

Enable