Border radius in SVG

Question

I have the following SVG:

<svg
                                        id="Capa_1"
                                        enable-background="new 0 0 80 70"
                                        height="64"
                                        width="64"
                                        viewBox="0 0 512 512"
                                        xmlns="http://www.w3.org/2000/svg"
                                      >
                                        <g>
                                          <g>
                                            <path
                                              d="m256 470-195-131.976v-380.024h390v380.024zm180-140.003h.293z"
                                              fill="#00C7B2"
                                            />
                                          </g>
                                          <path
                                            d="m256 480 195-131.976v-380.024h-195z"
                                            fill="#00957A"
                                          />
                                        </g>
                                      </svg>

I want to get border rounded or set border-radius. Like this:

How can I achieve that rounded corner effect? Please look into this.

Answer 1

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>

Answer 2

Don't use a text editor to do that. Use an SVG editor like Inkscape. This is particularly important in this case because there is no easy way to make a <path> round. If it would be a box then it would be possible. Opening it in Inkscape and converting the corners into Beziers you can achieve something this:

<svg
       height="100"
       width="100"
       viewBox="0 0 1000 1000"
       version="1.1"
       id="svg4690">
      <g
         id="g4663">
        <g
           id="g4659"
           transform="translate(91.89342,225.31329)">
          <path
             d="M 256,470 61,338.024 61.42095,-0.4989023 c 0,0 -3.857948,-17.6595987 10.573732,-32.2960387 14.431681,-14.636439 34.702398,-12.24525 34.702398,-12.24525 L 354.62126,-43.308172 398.3299,-5.9441259 451,338.024 Z M 436,329.997 h 0.293 z"
             id="path4657"
             inkscape:connector-curvature="0"
             style="fill:#00c7b2"
             sodipodi:nodetypes="ccczcccccccc" />
        </g>
        <path
           d="m 347.89342,694.05631 195,-131.976 V 226.67058 c 0,0 2.47881,-17.96849 -12.88028,-31.30308 -15.3591,-13.33459 -38.72388,-11.98828 -38.72388,-11.98828 L 347.89342,182.0563 Z"
           id="path4661"
           inkscape:connector-curvature="0"
           style="fill:#00957a"
           sodipodi:nodetypes="ccczccc" />
      </g>
    </svg>

Also, note that the original SVG is incorrectly positioned and the top of the green and dark-green areas do not match:

However in the snippet this is not visible because this area is out of the viewbox. This is another good reason to use Inkscape.

Another option to make round corners is to use boxes. Boxes can be rounded through the ry attribute. Here are 3 boxes with mildly rounded, rounded and extra rounded settings. You only need to position them in the right place.

<svg
       height="100"
       width="100"
       viewBox="0 0 1000 1000"
       version="1.1"
       id="svg4690">
      <g
         id="g4663">
        <g
           id="g4659"
           transform="translate(91.89342,225.31329)">
          <path
             d="M 256,470 61,338.024 61.42095,-0.4989023 c 0,0 -3.857948,-17.6595987 10.573732,-32.2960387 14.431681,-14.636439 34.702398,-12.24525 34.702398,-12.24525 L 354.62126,-43.308172 398.3299,-5.9441259 451,338.024 Z M 436,329.997 h 0.293 z"
             id="path4657"
             inkscape:connector-curvature="0"
             style="fill:#00c7b2"
             sodipodi:nodetypes="ccczcccccccc" />
        </g>
        <path
           d="m 347.89342,694.05631 195,-131.976 V 226.67058 c 0,0 2.47881,-17.96849 -12.88028,-31.30308 -15.3591,-13.33459 -38.72388,-11.98828 -38.72388,-11.98828 L 347.89342,182.0563 Z"
           id="path4661"
           inkscape:connector-curvature="0"
           style="fill:#00957a"
           sodipodi:nodetypes="ccczccc" />
        <rect
           style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
           id="rect4694"
           width="81.383575"
           height="81.383575"
           x="170.25067"
           y="196.41048"
           ry="8.6862621" />
        <rect
           ry="13.363494"
           y="291.82568"
           x="170.25067"
           height="81.383575"
           width="81.383575"
           id="rect4696"
           style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
        <rect
           style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
           id="rect4698"
           width="81.383575"
           height="81.383575"
           x="170.25067"
           y="386.77319"
           ry="33.007805" />
      </g>
    </svg>