I'm trying to create the rounded edges using svg rect tag. But rx and ry is making the rounded edges in four edges. Instead I'm trying to create only two edges (top left and top right). Same thing I have done with path mand (Working JS Fiddle).

The reason of creating rect is I'm trying to create the animated grow height.

<rect x="50" y="0" fill="#f00" width="100" height="100">
    <animate attributeName="height" from="0" to="100" dur="0.5s" fill="freeze" />
</rect>

---

EDITED

The following code will give the rounded corner what I have expected. I have used Cubic Curve method.

<svg style="width:500px; height:800px;">
    <path class="draw" d="M 75 445 L75 116.66666666666669 C 80 91.66666666666669 120 91.66666666666669 125 116.66666666666669 L125 445 75 445" style="stroke: rgb(192, 31, 31); stroke-width: 2px; fill: rgb(216, 62, 62);"></path>
</svg>

My question/problem is when I create the animation in path, height is not growing with animation.

I'm trying to create the rounded edges using svg rect tag. But rx and ry is making the rounded edges in four edges. Instead I'm trying to create only two edges (top left and top right). Same thing I have done with path mand (Working JS Fiddle).

The reason of creating rect is I'm trying to create the animated grow height.

<rect x="50" y="0" fill="#f00" width="100" height="100">
    <animate attributeName="height" from="0" to="100" dur="0.5s" fill="freeze" />
</rect>

---

EDITED

The following code will give the rounded corner what I have expected. I have used Cubic Curve method.

<svg style="width:500px; height:800px;">
    <path class="draw" d="M 75 445 L75 116.66666666666669 C 80 91.66666666666669 120 91.66666666666669 125 116.66666666666669 L125 445 75 445" style="stroke: rgb(192, 31, 31); stroke-width: 2px; fill: rgb(216, 62, 62);"></path>
</svg>

My question/problem is when I create the animation in path, height is not growing with animation.

• javascript
• html
• css
• svg
• css-animations

Share Improve this question Follow edited Aug 28, 2017 at 10:56 Mohammad Usman 39.4k2020 gold badges9898 silver badges9999 bronze badges asked Aug 28, 2017 at 6:57 mkHunmkHun 5,92188 gold badges4343 silver badges9494 bronze badges 12

• stackoverflow./questions/10177985/svg-rounded-corner – Amit Kumar Singh Commented Aug 28, 2017 at 7:11
• @Amit I have done this thing. Please check the Fiddle in my question. I'm trying to create the same thing using rect tag. – mkHun Commented Aug 28, 2017 at 7:13
• 1 You can't use the rect tag for this. What's wrong with the path tag? – Robert Longson Commented Aug 28, 2017 at 7:40
• @RobertLongson The problem is I'm trying to animate the height like auto grow height. Thats why I'm moving to rect tag. – mkHun Commented Aug 28, 2017 at 7:44
• Why not ask that question about animating the path tag then! – Robert Longson Commented Aug 28, 2017 at 7:46

 |  Show 7 more ments

3 Answers 3

Sorted by: Reset to default 9

You can use CSS3's scaleY() transformation to create the desired animation.

Initially your path will have scaleY(0) value (it will behave like the element has height: 0) and we will animate it to scaleY(1).

Following CSS will be required for this:

path {
  transform: scaleY(0);
  transform-origin: center bottom;
  animation: draw 1.5s linear forwards;
}

@keyframes draw {
  to {
    transform: scaleY(1);
  }
}

Working Demo:

.draw {
  animation: draw 1.5s linear forwards;
  transform-origin: center bottom;
  stroke: rgb(192, 31, 31);
  fill: rgb(216, 62, 62);
  transform: scaleY(0);
  stroke-width: 2px;
}

@keyframes draw {
  to {
    transform: scaleY(1);
  }
}

<svg width="400" height="200">
    <path class="draw"
          d="M 75 200 L75 25 C 80 0 120 0 125 25 L125 200 75 200" />
</svg>

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;opacity:1" />
  <rect x="50" y="40" rx="0" ry="0" width="150" height="130" style="fill:red;opacity:1" />
  Sorry, your browser does not support inline SVG.
</svg>

This is little tricky and this will do the work.Its a sample so you can do the same with yours too.

For rounded corners for only the top you can use this in css

border-top-left-radius
border-top-right-radius

Here is an example below.

img{ width:100%;
height:100%;
border-top-left-radius:20px;
border-top-right-radius:20px;
}

<img src="http://wallpaperswide./download/color_splash_effect-wallpaper-1366x768.jpg">