CSS Rounded Corners Without Images


 

 

This script is from http://www.spiffycorners.com/index.php

Great find! The less images you have on your page the faster it will download for a visitor. So with that in mind here is one more way to take some of the images out of your website. This is the CSS code for rounded corners on a container without using images.

<style type=”text/css”>

.spiffy { display:block; }

.spiffy * {
display: block;
height: 1px;
overflow: hidden;
font-size: .01em;
background: #ff0000;
}.spiffy1 {
margin-left: 3px;
margin-right: 3px;
padding-left: 1px;
padding-right: 1px;
border-left: 1px solid #ff0000;
border-right: 1px solid #ff0000;
background: #ff0000;
}
.spiffy2 {
margin-left: 1px;
margin-right: 1px;
padding-right: 1px;
padding-left: 1px;
border-left: 1px solid #ff0000;
border-right: 1px solid #ff0000;
background: #ff0000;
}
.spiffy3 {
margin-left: 1px;
margin-right: 1px;
border-left: 1px solid #ff0000;
border-right: 1px solid #ff0000;
}
.spiffy4 {
border-left: 1px solid #ff0000;
border-right: 1px solid #ff0000;
}
.spiffy5 {
border-left: 1px solid #ff0000;
border-right: 1px solid #ff0000;
}
.spiffyfg {
background: #ff0000;
}</style>
</head>
<body><div>

<b class=”spiffy”>
<b class=”spiffy1″>
<b class=”spiffy2″>
<b class=”spiffy3″>
<b class=”spiffy4″>
<b class=”spiffy5″>

<div class=”spiffyfg”>

<!– content goes here –>

</div>

<b class=”spiffy”>
<b class=”spiffy5″>
<b class=”spiffy4″>
<b class=”spiffy3″>
<b class=”spiffy2″>
<b class=”spiffy1″>

</div>

</body>

Here is what it will look like:






Content Goes Here






You Might Also Like:

Leave a Reply