Aidan Garnish

Collaboration Not Competition

CSS3 - rounded corners and drop shadow fun!

As IE9 is going to provide support for CSS3 I thought that it was about time I took a quick look at some of what is going to be available.

The following html and css demonstrates just how easy it is to produce rounded corners, drop shadows and gradient borders without an image file in sight -brilliant!

HTML File

<html>
<head>
<link rel="stylesheet" href="css3.css" media="screen" />   
</head>
<body>
<div class="box"></div>
<br/><br/><br/>
<div class="box2"></div>
<br/><br/><br/>
<div class="box3"></div>
<br/><br/><br/>
<div class="box4"></div>
<br/><br/><br/>
<div class="box5"></div>
</body>
</html>

CSS File

body
{
padding:20px 20px 20px 20px;
}

.box
{
-moz-border-radius-bottomleft:50px;
-moz-border-radius-bottomright:200px;
border:orange 20px double;
-moz-border-radius-topleft:100px;
-moz-border-radius-topright:66.66px;
padding:24px 24px 24px 24px;
width:320px;
height:50px;
}

.box2
{
-moz-border-radius: 1.6em;
border-radius: 1.6em;
border:black solid 1px;
height:100px;
-moz-box-shadow:-10px 10px 20px gray;
width:400px;
}

.box3
{
-moz-box-shadow:10px 10px 20px red;
-moz-border-radius: 1.6em;
border-radius: 1.6em;
border:red solid 1px;
height:100px;
width:400px;
}

.box4
{

background-color: #DAE8EC;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
border: 2px solid #B8CB99;
padding: 10px;
width:380px;
height:70px;
}

.box5
{
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;
height:100px;
width:370px;
}

If you save these files and open them with Firefox 3.5 or above you should see something similar to: