Forum Moderators: not2easy
Depending on the size of your corners, you will likely need to tweak some of the values such as padding.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>cta</title>
<style type="text/css" media="screen">
body {margin:1em;}
pre {font-size:76%;background:#eee;border:1px solid #ddd;overflow:auto;min-height:3em;}
h1 {font-size:144%;}
h2 {font-size:114%;}
h1,h2,h3 {font-weight:bold;margin:0.6em 0 0.3em;}
</style>
<style type="text/css">
.cta {overflow:hidden;display:inline-block;}.cta{display:block;}
.cta a,.cta button{float:left;text-decoration:none;border:0;padding:0;cursor:pointer;font:bold 100% arial,sans-serif;overflow:visible;}
.cta button {background:none;} /* IE Bugs if this is on the anchor */
.cta span{display:block;position:relative;}
.cta a:hover{background:none;} /* Fix IE Hover State */
.cta .t{margin-left:20px;background-position:100% 0;}
.cta .t span{position:relative;left:-20px;background-position:0 0;padding:20px 20px 0 20px;}
.cta .b{margin-left:20px;background-position:100% 100%;font-size:0;}
.cta .b span{position:relative;left:-20px;background-position:0 100%;padding:0 0 40px 0;}
/* Color Variations */
.cta a span,.cta button span{background-image:url(navbox.gif);color:#000;}
.cta a:hover span,.cta button:hover span{background-image:url(navbox.gif);}
.cta .blue span{background-image:url(navbox.gif);color:#fff;}
.cta .blue:hover span{background-image:url(navbox.gif);color:#000;}
</style>
</head>
<body>
<h1>Call To Action</h1>
<h2>Examples</h2>
<h3>Anchor</h3>
<p class="cta"><a class="blue" href="#CTA"><span class="t"><span>Heah<br>brr<br>err<br>grrr!</span></span><span class="b"><span> </span></span></a></p>
<p class="cta"><a class="blue" href="#CTA"><span class="t"><span>
content1<br>
content2<br>
content3<br>
<br>
content1<br>
content2<br>
content3<br>
<br>
content1<br>
content2<br>
content3<br>
<br>
content1<br>
content2<br>
content3<br>
</span></span><span class="b"><span> </span></span></a></p>
<h3>Button</h3>
<form action="?">
<div class="cta"><button type="submit"><span class="t"><span>Hello World</span></span><span class="b"><span> </span></span></button></div>
</form>
</body>
</html>
[edited by: Xapti at 4:35 am (utc) on May 7, 2008]
[w3.org...]
Till then it'll be working with the browser specific tags and/or do a graceful degradation to square border for all old browsers.
Or use images etc. to fake it.
The best way to get browsers to support it, is to start to use it and not offer the browsers makers the easy route by using images etc to make it work in their old contraptions. If we don;t use it, they'll never bother to make it work properly.
It doesn't mean it can't be done though, since pixel perfect design isn't necessary, and who cares if the borders are square instead of rounded? beats having to pump up a whole bunch of nested elements and background images.
My example was also a broad one, that can be used for things more advanced than just rounded corners, specifically custom borders/corners, which is why I included it.
The concept is simple: float the corners into position, use background-position to position a single image - a circle - as required. For the vertical and horizontal borders, you nest divs in divs and apply borders to once side or the other.
Similar Solution Here [webmasterworld.com]
