0

I'm trying to create a half circle border around a div using border-bottom to create this effect: enter image description here

It renders correctly on chrome and firefox (can't test android although it appears correct in chrome dev tools) but on safari 11.0.3 and ios 11.2.6 you can see a top border appearing.

html:

<div class="circle-border-wrapper">
    <div class="circle-border">
        <h3>{{ .heading }}</h3>
        <p>{{ .text }}</p>
    </div>
</div>

css:

.circle-border-wrapper .circle-border:before {
  content: " ";
  position: absolute;
  left: 0;
  top: -66px;
  border-bottom: 8px solid #ea3dd3;
  border-radius: 50%;
  height: 187%;
  width: 100%;
}

Any ideas?

Mox
  • 411
  • 3
  • 13
  • consider box-shadow instead – Temani Afif Mar 16 '18 at 14:06
  • possible duplicate of https://stackoverflow.com/questions/23135196/css-1px-border-stroke-breaks-around-border-radius7 – Temani Afif Mar 16 '18 at 14:07
  • https://stackoverflow.com/questions/9312429/safari-rendering-rounded-corners-incorrectly?rq=1 – Temani Afif Mar 16 '18 at 14:08
  • Box shadow doesn't give the tappered effect nor the visual appearance I'm looking for. Those linked posts I tried out but to no avail. Also, I'm not sure how relevant those older posts are for current safari version. – Mox Mar 16 '18 at 14:17
  • try filter drop-shadow – Temani Afif Mar 16 '18 at 14:19
  • those post are old but they can be good one to find some tricks, as you may find recents answers/comment also related links – Temani Afif Mar 16 '18 at 14:19
  • I tried drop shadow, but it doesn't render a crisp edge. Any other ideas? – Mox Mar 16 '18 at 14:38
  • After I found [this answer](https://stackoverflow.com/a/17210864/1880836) that explained what the issue is with safari, I was able to find [this answer](https://stackoverflow.com/a/22415694/1880836) that provided the solution. – Mox Mar 16 '18 at 16:56

0 Answers0