Make a square width longer while keeping corners round

Question

I have a background image for example

What I want to do is make the length longer but keep the rounded corners where they are. I know there is a CSS trick out there that does this (they use it for iPhone web apps) but I can't find it.

How can I do this?

Answer 1

...........................Live demo

Hi now it's very simple

HTML

<div></div>

used to this css

div{
width:100px;
  height:100px;
  background:red;
  border-radius:20px;
  border:solid 10px blue;
  box-shadow:20px 20px 0 0 rgba(0,0,0,0.4) inset;
-webkit-box-shadow:20px 20px 0 0 rgba(0,0,0,0.4) inset;
  -moz-box-shadow:20px 20px 0 0 rgba(0,0,0,0.4) inset;
}

Live demo

---

Same as u want this

Demo