How do you scale an element without affecting the border radius?

Question

Currently, my webkit conversion for scaling will affect the border radius, which will distort it. Is there any css3 hack that will allow me to keep rounded corners? Example

Answer 1

Just manually manipulate the width and height, rather than using scaling:

#pan { width:500px; height:500px; position:relative; background:#aaa; } #rec { width:100px; height:100px; position:absolute; top:250px; left:250px; background:#fff; -webkit-transition:500ms cubic-bezier(0.785, 0.135, 0.000, 0.940) } #rec:hover{ /*-webkit-transform:scale(3.5,1);*/ width:300px; left:150px; -webkit-transition:500ms linear; -webkit-border-radius:35px; } 

 <div id="pan"> <div id="rec"></div> </div> 

Answer 2

You can put your element of interest in a div. Then you can move the css * border from your element to the outer div. Then you can apply scaling ** to the source element; the border (now in the outer div) should not be affected.

* (and possibly other attributes, such as absolute positioning, size, etc.)

** (any further transformations, such as rotations or 3d transforms, can then be applied separately to the outer div)