css - make a square width longer while keeping corners round

Question

So 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 cant find it.

Wondering if anyone knows how.

Answer 1

...................... .现场演示

嗨，现在很简单

HTML

<div></div>

习惯了这个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;
}

现场演示

---

和你想要的一样

演示