Well, some days ago I faced again with idea how to solve the rounded coroners problem on web page. So, having looked around I little I found out that with todays top - CSS2 it is not possible, because it just has no such feature - you can have of course them, but previously you need to do something with Photoshop or gimp or whatever and create some sort of border image. Well you could say or ask "And what?", but lets imagine, having the feature available in CSS3 you could save I lot of time and energy and data mount unnecessary for your creation.
So, I started to read and search around or Google this problem on W3.org website (of course not this one only), and there is solution whom you maybe know or have heard about CSS3 , you certainly should have.
So below comes the script and I,ve tested it on Safari(see different code for that inside), Chrome and Firefox and dear IE lovers not for this time for you, wee need to wait a little until IE9 will come on stage - so below the code and some screen shots.
So first some screen shots;
And here comes the code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS_rounded_borders</title>
<style type="text/css">
/*Code for firefox at least 3.5*/
.ridge {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:ridge; border-width:3px; -moz-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.dotted {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:dotted; border-width:1px; -moz-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.dashed {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:dashed; border-width:1px; -moz-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.solid {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:solid; border-width:1px; -moz-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.double {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:double; border-width:3px; -moz-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.groove {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:groove; border-width:3px; -moz-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.inset {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:inset; border-width:5px; -moz-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.outset {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:outset; border-width:5px; -moz-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
/*Code for Safari*/
.ridge {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:ridge; border-width:3px; -webkit-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.dotted {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:dotted; border-width:1px; -webkit-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.dashed {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:dashed; border-width:1px; -webkit-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.solid {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:solid; border-width:1px; -webkit-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.double {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:double; border-width:3px; -webkit-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.groove {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:groove; border-width:3px; -webkit-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.inset {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:inset; border-width:5px; -webkit-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
.outset {margin-top:10px; margin-right:auto; margin-left:auto; height:60px; width:150px; border-style:outset; border-width:5px; -webkit-border-radius:8px; border-color:#000000; background-color:#FFFFFF; text-align:center;}
</style>
</head>
<body>
<div class="ridge">Radius=8px and border style is Ridge</div>
<div class="dashed">Radius=8px and border style is dashed</div>
<div class="dotted">Radius=8px and border style is dotted</div>
<div class="solid">Radius=8px and border style is solid</div>
<div class="groove">Radius=8px and border style is groove</div>
<div class="double">Radius=8px and border style is double</div>
<div class="inset">Radius=8px and border style is inset</div>
<div class="outset">Radius=8px and border style is outset</div>
</body>
</html>
Thats for today - to be continued.
I forgot to ad an Opera functionality, so her would be code for Opera and it should work.
ReplyDelete{border-radius:5px;} - add divs and what you need for this. This actually is the W3.org original CSS3 code version.