Q:

Compensate for Safari's Border Radius Drawing

Observe the below simple example:

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

In Safari, this causes part of the upper borders to be drawn:

I don't want those "ghosted" upper borders.  How do I compensate for this? 

A:

You need to remove the rounded border on the top side of your div like so:
div {
    border-bottom: 1px solid black;
    border-radius: 0 0 20% 20%;
    padding: 10px;
}

This is using the border-radius shorthand with 4 values where

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

https://www.w3schools.com/cssref/css3_pr_border-radius.asp

