MatzunaTata MatzunaTata - 1 year ago 91
CSS Question

CSS one side cut circle image with border

How I can make following shape with a colored border:

round image with shaped edge

My first try was pure CSS but the attached code makes more an egg shape than a circle:

img {
border: 2px #ff00ff solid;
border-top-left-radius: 60% 50%;
border-bottom-left-radius: 60% 50%;
border-top-right-radius: 50% 20%;
border-bottom-right-radius:50% 20%;

<img src="" style="width:100%">

Second try, working with SVG isn't supported in Opera and IE and I have no idea how to make borders. The "cut" doesn't work every time.

img {
clip-path: url(#myClip);

<svg width="120" height="120"
viewBox="0 0 120 120"

<clipPath id="myClip">
<circle cx="260" cy="256" r="256" style="fill:none;stroke:#00df0b;stroke-width:6"/>

<img src="" style="width:100%">

Answer Source

The simplest solution is probably just to make an SVG.

<svg width="400px" height="400px" viewBox="0 0 1 1"
    <mask id="myMask" x="0" y="0" width="1" height="1"
          maskContentUnits="objectBoundingBox" fill="white">
      <path id="myPath" d="M 0.8 0.9 L 0.8 0.1 A 0.5 0.5 0 1 0 0.8 0.9 Z"/>
  <image xlink:href=""
         x="0" y="0" width="1" height="1" mask="url(#myMask)"/>
  <use xlink:href="#myPath" fill="none" stroke="#f0f" stroke-width="0.01"/>