Search code examples
csssafari

Drawing a semi-circle on Safari

I have some CSS to draw a semi-circle, outlined below:

<!DOCTYPE html>
<head>
  <style>
    .semiCircle {
      width: 200px;
      height: 100px;
      border-radius: 50% / 100%;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border: 3px solid black;
    }
  </style>
</head>
<body>
  <div class="semiCircle"/>
</body>

This works fine for Chrome but on Safari I get the following:

Result on Safari

It looks like if I remove any one of the border edges then this graphical error disappears. For example, if I remove the bottom border, I get this:

enter image description here

My solution therefore is to not draw the bottom border and add it back in manually with a separate element, for example:

<!DOCTYPE html>
<head>
  <style>
    .semiCircleContainer {
      width: 206px;
      height: 103px;
      border-bottom: 3px solid black;
    }
    .semiCircle {
      width: calc(100% - 6px);
      height: calc(100% - 3px);
      border-radius: 50% / 100%;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-left: 3px solid black;
      border-right: 3px solid black;
      border-top: 3px solid black;
    }
  </style>
</head>
<body>
  <div class="semiCircleContainer">
    <div class="semiCircle"/>
  </div>
</body>

Is there a more elegant solution to this issue?

Solution

  • You could go back down to just one element and draw the semi circle part in an after pseudo element:

    <!DOCTYPE html>

<head>
  <style>
    .semiCircle {
      width: 206px;
      height: 103px;
      border-bottom: 3px solid black;
      position: relative;
    }
    
    .semiCircle::after {
      content: '';
      width: calc(100% - 6px);
      height: 100%;
      border-radius: 50% / 100%;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-left: 3px solid black;
      border-right: 3px solid black;
      border-top: 3px solid black;
      position: absolute;
    }
  </style>
</head>

<body>
  <!--<div class="semiCircleContainer">-->
  <div class="semiCircle" />
  <!--</div>-->
</body>

    This seems to get round the problem - which incidentally on Safari (at least on IOS) seems to show the spurious thin line only on some zoom levels. This sort of phenomenon can be seen when the system is struggling to map CSS pixels to screen pixels (there are several screen pixels to 1 CSS pixel on modern screens and sometimes a screen pixel can get 'left behind' in the calculations - a bit like a rounding error).