Svg CSS Rounded Corner Not Working

svg css rounded corner not working

rx and ry are regular attributes rather than presentation attributes. Only presentation attributes can be styled by CSS. The various regular/presentation attributes are listed here

See also Presentation Attribute and Property from the SVG 1.1 specification.

The upcoming SVG 2 specification proposes that most presentation attributes become CSS properties. So far Chrome and Firefox have implemented this part of the draft specification. I imagine other UAs will implement this in due course.

Rounding the corners of an SVG

The easiest solution is probably to use the border-radius CSS property on the svg wrapper element. It will allow you to clip round corners on your svg element and expose the background color behind the svg.
Here is an example :

body {
  background: darkorange;
}

#wrapper {
  display: block;
  width: 100%;
  border-radius: 50px;
  overflow: hidden;
  border:10px solid pink;
}

<svg id="wrapper" viewBox="0 0 100 100">
  <svg>
    <rect fill="teal" x="0" y="0" width="100" height="100"/>
   </svg>
</svg>

Setting rounded corners for svg:image

'border-radius' doesn't apply to svg:image elements (yet anyway). A workaround would be to create a rect with rounded corners, and use a clip-path.

An example.

The relevant part of the source:

<defs>
    <rect id="rect" x="25%" y="25%" width="50%" height="50%" rx="15"/>
    <clipPath id="clip">
      <use xlink:href="#rect"/>
    </clipPath>
  </defs>

  <use xlink:href="#rect" stroke-width="2" stroke="black"/>
  <image xlink:href="boston.jpg" width="100%" height="100%" clip-path="url(#clip)"/>

It's also possible to create several rect elements instead of using <use>.

svg rounded-corner clipping in firefox (works fine in ie9 and chrome)

You could also just make the svg rect have the same rounded corners.

<svg id="paper" version="1.1" width="300" height="300" style="border-radius: 20px; background-color: red;">
  <rect id="background" width="100%" height="100%" rx="20" fill="red"/>
</svg>

Or if you need the clipping, something like what you suggested:

<!DOCTYPE html>
<html>
<body>
<svg id="paper" version="1.1" width="300" height="300" clip-path="url(#clip)">
    <defs>
        <clipPath id="clip">
            <rect id="background" width="100%" height="100%" rx="20" fill="red"/>
        </clipPath>
    </defs>
    <rect width="100%" height="100%" fill="red"/>
</svg>
</body>
</html>

Border radius in SVG

I am not sure there is way to round SVG in HTML (like apply CSS?), but you can use an SVG to the editor to the edits. I use Figma to edit this, but any vector-based graphic solution should be fine I guess.

<svg width="48" height="59" viewBox="0 0 48 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="19" rx="4" fill="#00C7B2"/>
<path d="M25.8629 58.0196C24.6968 58.6333 23.3032 58.6333 22.1371 58.0196L2.13714 47.4942C0.822862 46.8025 0 45.4396 0 43.9545V14C0 11.7909 1.79086 10 4 10H44C46.2091 10 48 11.7909 48 14V43.9545C48 45.4396 47.1771 46.8025 45.8629 47.4942L25.8629 58.0196ZM46.1538 45.6013H46.1899H46.1538Z" fill="#00C7B2"/>
<path d="M4.40314 5.48826C2.21424 5.48826 2.8797 5.48826 4.40314 5.48826L23.7245 0.137201C21.9918 0.617057 23.9735 0.068235 24.2199 0V58.4334C24.2199 58.4334 25 58.5 27 57.5L46 47.3743C47.3063 46.6855 48 45.1546 48 43.6696V3.99145C48 1.78704 46.2255 4.52027e-06 44.0366 4.52027e-06L24.2199 0L4.40314 5.48826Z" fill="#00957A"/>
</svg>

Svg CSS Rounded Corner Not Working