Question: Can somebody please help me out on how to increase the size of the rounded button with respect to text. Please check the image:

![enter image description here](https://i.stack.imgur.com/Em8lw.png)

I want to be able to write any length of text and rounded button will stretch automatically based on text.

Please help me on how to write CSS for to get this working ?

**Note:** I don't want to use CSS3 `border-radius` because it does not work in IE and I don't want to use css3pie, etc, that's why i have created the rounded images. Thanks

Answer: 
```
ul {
    list-style-type: none;  
}
ul li {
    height: 31px; // height of the background image *reused below
    margin: 10px; // width of the left image *reused below
    float: left;
    background: url(left.png) no-repeat top left;
}
ul li div {
    height: 31px;
    margin-left: 10px;
    padding-right: 10px;
    background: url(right.png) no-repeat top right;
}

```

//used with

```
<ul>
    <li><a href="#"><div>text</div></a></li>
    <li><a href="#"><div>texttexttext</div></a></li>
    <li><a href="#"><div>texttexttexttext</div></a></li>
</ul>

```
I would probably opt for creating a div which inherits a css class like the following

```
<div class="button">TEXT HERE</div>

```

The CSS would be the following:

```
.button { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: blue; }

```

The above style would allow all browsers (except older IE's) to render the rounded corners rounded which means you will have no need for images