How do you scale a element without affecting the border-radius?

Currently my webkit transform for scaling would affect the border radius, making it distorted. 开发者_如何学PythonIs there any css3 hack that will allow me to preserve the rounded corners? Example

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>

You could put your element of interest in a div. Then you could move the css border* from your element to the outer div. You can then apply a scaling** transform to your original element; the border (now in the outer div) should be unaffected.

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

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