CODEWITHSUNDEEP
htmlcsssafari
Fjott
Fjott

Reputation: 1137

New moon shaped css not working in safari

I got this simple css shape that should resemble a new moon, in chrome and firefox everything looks fine, but in safari the outline of the whole circle is visible - how can I make this new moon shape work in safari as well?

Safari result

Img -> Current Safari result

.circle {
  height: 50px;
  width: 50px;
  border-left: 10px solid red;
  border-radius: 50%;
}
<div class="circle"></div>

Upvotes: 0

Views: 104

Answers (1)

MTCoster
MTCoster

Reputation: 6145

This appears to be a bug in how webkit handles partial borders with border-radius set.

Here’s a method using box-shadow instead of borders, which I believe is visually similar:

.circle-box-shadow {
  height: 50px;
  width: 50px;
  margin-left: 10px;
  box-shadow: -10px 0 0 red;
  border-radius: 50%;
}

.circle-border {
  height: 50px;
  width: 50px;
  border-left: 10px solid red;
  border-radius: 50%;
}
<p>Using <code>box-shadow</code>:</p>
<div class="circle-box-shadow"></div>
<br>
<p>Using <code>border</code>:</p>
<div class="circle-border"></div>

Tested in Chrome 70.0.3538.110 and Safari 12.0.1.

Upvotes: 3

Related Questions