I have a button which works well with the anchor tag but does not work with the submit input tag. How can i make this work with submit button ?
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.classname:active {
position:relative;
top:1px;
}
When I first started learning about inputs and got to the Submit i thought it crashes and the submit doesn't work. Actually it turned that only the cursor changes. Try to set the button style cursor: pointer.
Related
Just started with styling buttons and my desire was to have a background to the left of the button while the text search was to the right of the image.
Heres the code I have so far. And here is how the button is so far
How can I add a small icon to the left of the text? I tried running this code but no luck.
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0;
.button {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color:#f9f9f9;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:76px;
border:1px solid #dcdcdc;
display:inline-block;
color:#666666;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:66px;
line-height:66px;
width:152px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.button:hover {
background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
background-color:#e9e9e9;
}
.button:active {
position:relative;
top:1px;
}
<div class="button">Search!</div>
Adding your exact code to the example code output works, so there's something wrong with the way you incorporated the line into your css definitions.
Unfortunately, your example code doesn't include the actual line, but my guess is that you might have put it above the linear-gradient background definitions, which would then override your image. To test if this is the error, put it all the way at the bottom of the .button declaration and see if it's being displayed.
To use multiple background images, you can comma-seperate the individual values, like so:
background-image: url('one.png'), url('two.jpg');
background-position: center center, left top;
Try to add your background image after background linear gradient
To add multiple backgrounds to an element, you need to declare them all in a comma-separated list, like this:
.button {
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0, linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
}
Backgrounds are painted from last to first, so your icon should show up just fine.
If you declare a property multiple times, the browser will really overwrite the previous value, unless the new one is invalid. Also, keep in mind that gradients are considered "images".
Try to give background-size property like this
.button {
-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
box-shadow: inset 0px 0px 0px 0px #ffffff;
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color: #f9f9f9;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
text-indent: 76px;
border: 1px solid #dcdcdc;
display: inline-block;
color: #666666;
font-family: Arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 66px;
line-height: 66px;
width: 152px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #ffffff;
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0;
background-size: contain;
}
<html>
<body>
<div class="button">Search!</div>
</body>
</html>
The buttons on my mobile site are not proportional at all to the screen. I can not figure out why they are so small. A picture is below.
Here is all of the relevant css:
<style type="text/css" media="handheld, only screen and (max-device-width: 700px)">
#onbutton {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
border-radius: 6px;
text-indent:0;
border:1px solid #dcdcdc;
width: 100%;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
#onbutton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
#onbutton:active {
position:relative;
top:1px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b9b9b9), color-stop(1, #cecece) );
}
#status {
width: 100%;
opacity: 0;
text-align: center;
font-family: sans-serif;
border-width: 1px;
border-style: solid;
border-radius: 6px;
padding-top: 10px;
padding-bottom: 10px;
}
#status.off {
background-color: #ff5353;
border-color: #ff1515;
}
#status.on {
background-color: #9eda97;
border-color: #11ab0c;
}
</style>
And here is the HTML:
<body>
<div id="main">
<input type="button" value="Start computer" id="onbutton"></input>
<br/>
<br/>
<div id="status" class="on" style="opacity:1">Hello</div>
</div>
</body>
Are you looking for the mobile meta viewport tag?
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
I was working with this for hours but get no result. What I want to do is displaying these 3 boxes in the center of the page in one line with the same width of spaces between the boxes.
Here is the codes:
#instagram-home{
border: 1px solid #000;
padding: 10px;
margin-left: 18px;
width: 29%;
border-radius:10px;
background: #f0f0f0;
color:#fff;
text-align: justify;
}
#innergram{
padding: 10px;
background: #990000;
}
#instagram-home h2{
text-align: center;
font-size: 20px;
margin-top: 1px;
}
.classname {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8) );
background:-moz-linear-gradient( center top, #2060bf 5%, #3fb8e8 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
background-color:#2060bf;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #120407;
display:inline-block;
color:#fafafa;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:7px 16px;
text-decoration:none;
text-shadow:1px 1px 7px #4f144f;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf) );
background:-moz-linear-gradient( center top, #3fb8e8 5%, #2060bf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
background-color:#3fb8e8;
}.classname:active {
position:relative;
top:1px;
}
#pinterest-home{
border: 1px solid #000;
padding: 10px;
margin-left: 18px;
width: 29%;
border-radius:10px;
background: #f0f0f0;
color:#fff;
}
#innerpin{
padding: 10px;
background: #990000;
}
#pinterest-home h2{
text-align: center;
border-bottom: 5px solid #000;
padding-bottom: 20px;
font-size: 20px;
margin-top: 1px;
}
.classname {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8) );
background:-moz-linear-gradient( center top, #2060bf 5%, #3fb8e8 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
background-color:#2060bf;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #120407;
display:inline-block;
color:#fafafa;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:7px 16px;
text-decoration:none;
text-shadow:1px 1px 7px #4f144f;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf) );
background:-moz-linear-gradient( center top, #3fb8e8 5%, #2060bf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
background-color:#3fb8e8;
}.classname:active {
position:relative;
top:1px;
}
#twitter-home{
border: 1px solid #000;
padding: 10px;
margin-left: 18px;
width: 29%;
border-radius:10px;
background: #f0f0f0;
color:#fff;
text-align: justify;
}
#innertweet{
padding: 10px;
background: #990000;
}
#twitter-home h2{
text-align: center;
border-bottom: 5px solid #000;
padding-bottom: 20px;
font-size: 20px;
margin-top: 1px;
}
.classname {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8) );
background:-moz-linear-gradient( center top, #2060bf 5%, #3fb8e8 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
background-color:#2060bf;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #120407;
display:inline-block;
color:#fafafa;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:7px 16px;
text-decoration:none;
text-shadow:1px 1px 7px #4f144f;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf) );
background:-moz-linear-gradient( center top, #3fb8e8 5%, #2060bf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
background-color:#3fb8e8;
}.classname:active {
position:relative;
top:1px;
}
<ul style="display:inline; list-style-type:none;">
<li>
<div id='pinterest-home'>
<div id='innerpin'>
<h2><?php echo get_option('add_the_boxes_to_pages_title'); ?></h2>
<p><?php echo get_option('add_the_boxes_to_pages_explanation'); ?></p>
<center>Order Now</center>
</div>
</div>
</li>
<li>
<div id='twitter-home'>
<div id='innertweet'>
<h2><?php echo get_option('add_the_boxes_to_pages_tweettitle'); ?></h2>
<p><?php echo get_option('add_the_boxes_to_pages_explanationtweet'); ?></p>
<center>Order Now</center>
</div>
</div>
</li>
<li>
<div id='instagram-home'>
<div id='innergram'>
<h2><?php echo get_option('add_the_boxes_to_pages_instatitle'); ?></h2>
<p><?php echo get_option('add_the_boxes_to_pages_instaexplanation'); ?></p>
<center>Order Now</center>
</div>
</div>
</li>
</ul>
Fiddle source: http://jsfiddle.net/eA3hp/
I had tried to fix it using table and finally ul li code, but no result.
Do you know how to achieve what I need?
Thanks
like this? (it's still quite messy but i hope you'll get the idea)
HTML:
<ul class="list-holder">
<li class="home">
<div class='inner'>
<h2>TEST!</h2>
<p>TESTER</p>
<center>Order Now
</center>
</div>
</li>
<li class="home">
<div class='inner'>
<h2>TEST!</h2>
<p>TESTER</p>
<center>Order Now
</center>
</div>
</li>
<li class="home">
<div class='inner'>
<h2>TEST!</h2>
<p>TESTER</p>
<center>Order Now
</center>
</div>
</li>
</ul>
CSS:
.list-holder {
background:#456456;
list-style-type:none;
width:100%;
}
.classname {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8));
background:-moz-linear-gradient(center top, #2060bf 5%, #3fb8e8 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
background-color:#2060bf;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #120407;
display:inline-block;
color:#fafafa;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:7px 16px;
text-decoration:none;
text-shadow:1px 1px 7px #4f144f;
}
.classname:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf));
background:-moz-linear-gradient(center top, #3fb8e8 5%, #2060bf 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
background-color:#3fb8e8;
}
.classname:active {
position:relative;
top:1px;
}
.home {
border: 1px solid #000;
padding: 10px;
width: 29%;
border-radius:10px;
background: #f0f0f0;
color:#fff;
text-align: justify;
display:inline-block;
}
.inner {
padding: 10px;
background: #990000;
}
.home h2 {
text-align: center;
border-bottom: 5px solid #000;
padding-bottom: 20px;
font-size: 20px;
margin-top: 1px;
}
.classname {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8));
background:-moz-linear-gradient(center top, #2060bf 5%, #3fb8e8 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
background-color:#2060bf;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #120407;
display:inline-block;
color:#fafafa;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:7px 16px;
text-decoration:none;
text-shadow:1px 1px 7px #4f144f;
}
.classname:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf));
background:-moz-linear-gradient(center top, #3fb8e8 5%, #2060bf 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
background-color:#3fb8e8;
}
.classname:active {
position:relative;
top:1px;
}
Fiddle: http://jsfiddle.net/VN3AS/
I am trying to create a vertical grouping of buttons using CSS. Previously, I tried doing this using an unordered list.
I have since removed the unordered list and just left the buttons as elements. Everything works fine in Chrome and FF, but not IE8. The only time the "hover" state is activated is when you actually hover over the text of the link, not the entire button. I want the entire box to be clickable.
Here is the relevant code from my HTML:
<div id="itemarea">
Skydiving
Knitting
Checkers
Surfing
<button class="save_button" name="button" type="submit">Save</button>
</div>
and here is the CSS:
#itemarea{
padding-bottom:20px;
margin-top:54px;
height:470px;
float:left;
width:200px;
padding-left:15px;
background-color:#CFCFCF;
border:2px solid gray;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-o-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-ms-filter: progid:DXImageTransform.Microsoft.Shadow( Strength=5, Direction=135, Color='#999999' );
filter: progid:DXImageTransform.Microsoft.Shadow( Strength=5, Direction=135, Color='#999999' );
}
.item_button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
width:120px;
}.item_button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.item_button:active {
position:relative;
top:1px;
}
Thanks in advance for any assistance you can provide.
Make sure ie8 isn't in compatibility mode, try clicking the broken page icon in the url bar
Hi guys i'm trying to create this(image) css border around a div, but having trouble.
I have created the border but cannot get the border to be smooth.
here is my code
border-left: 5px solid #036;
border-right: 5px solid #036;
border-top: 10px solid #036;
border-bottom: 5px solid #036;
Fiddle Up, You can see it here.
Hope it help.
EDIT:
Html:
<div class="a">
<span class="abs">Title here?</span>
<div class="b">
Hello.
</div>
</div>
Css:
div.a {
border-top: 10px solid #333;
border-left: 5px solid #333;
border-bottom: 5px solid #333;
border-right: 5px solid #333;
border-radius: 10px;
background-color: #333;
width: 200px;
height: 400px;
}
div.b {
border-radius: 5px;
background-color: #FFF;
width: 180px;
height: 350px;
padding: 10px;
}
.abs {
color: #FFF;
display: inline-block;
font-weight: bold;
margin-bottom: 10px;
}
You can attain such a setup using new CSS3 facilities, namely border-radius and gradient form of background image. You can find information about those all around the internet, for example background gradient and border radius.
Below is example, it will not work in all browsers, and is not exactly what you want, but it should be enough to give you the basic idea:
The html structure could look like this:
<div id="big_div">
Search for a hotel
<div id="small_white_div">
Some other content
</div>
</div>
And the corresponding css would be:
#big_div {height:450px;width:250px;border-radius: 5px;background-color:red;
background-image: linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -o-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -moz-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209)
51%, rgb(33,51,140) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209)
51%, rgb(33,51,140) 100%);
background-image: -ms-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.05, rgb(33,51,140)),
color-stop(0.51, rgb(125,187,209)),
color-stop(1, rgb(33,51,140))
);}
#small_white_div {height:400px;width:220px;margin:auto;border-radius:5px;
background-color:white;margin-top:20px;}
Good luck.
It's done with background image.
You are looking for border-radius to get the rounded corners. Try out something like this:
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
Note this is CSS3 and will not work in older versions of IE