5 Methods for CSS Curvy Corners
As with many web developers, I am sure you have struggled with getting those nice Web 2.0 curvy corners or rounded rectangles. The problem is really IE, for some reason, the developers at IE, never figured out what curvy corners are, even though other browsers have their CSS3 attribute already. The methods described should work for most commonly used browsers (Opera, Firefox 3, IE 7 & 8, Safari).
toc_collapse=0;
Contents
- Method #5: Bullet Point Curves
- Method #4: IE-Specific CSS
- Method #3: Images Solve all Problems
- Method #2: Pure CSS Solution
- Method #1: JavaScript Solution
Method #5: Bullet Point Curves
Developer Stu Nicholls of CSS Play, came up with this smart way to make curvy corners. Just using • , yes, bullet points--how creative is that?
Here's the complicated CSS he used, which is the only real downside.
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:10px 15px; font-size:11px;}
Of course, other people have used this method before without the bullet points, but the bullet points were an interesting pick.
<em id="ctl"><b>•</b></em>
<em id="cbl"><b>•</b></em>
<em id="ctr"><b>•</b></em>
<em id="cbr"><b>•</b></em>
<p>Awesome curved corners!</p>
</div>
Method #4: IE-Specific CSS
IE seems to be the major trouble maker, so just create some code specific to IE--this is painful I know!
The following code in your html can signal that only IE should read the following code:
<style type="text/css">
</style>
<![endif]-->
What is interesting is the use of CSS3 attributes for Firefox and Safari.
border: 1px solid #000000;
background-color: #CCCCCC;
-webkit-border-radius: 5px; /* for Safari */
-moz-border-radius: 5px; /* for Firefox */
}
Be careful though, the above code does not work in IE, and if you want only certain sides of your box to be curvy, the Safari and Firefox method have different formats.
Here's a real live example of the whole concept.
Method #3: Images Solve all Problems
If you have Adobe Photoshop or some other program, they usually have a rectangle tool with a border-radius option that you can define by the pixel. A 5 px border radius will create some nice smooth curves. This is what I like to call the old way of doing curvy corners.
Create an image with the correct border looks and then use the crop tool to grab the left and right side. Save the two images, let's call them linkleft.png and linkright.png.
Write your XHTML code, just two divs surrounding your main links area:
<div class="links"><a href="#">Example Link</a></div>
<div class="link-right"></div>
Write a bit of CSS, just make sure you set the width to the exact width of your images. Mine are going to be 8 pixels wide and 15 pixels is the height (the height may need some trial and error).
background-image: url(images/linkleft.png);
background-repeat: no-repeat;
width: 8px;
height: 15px;
}
.links {
background-color: #333333;
padding: 3px;
}
.link-right {
background-image: url(images/linkright.png);
background-repeat: no-repeat;
width: 8px;
height: 15px;
}
After some trial and error it should work in almost all browsers.
Method #2: Pure CSS Solution
Now this my favorite solution. It is simple, just gotta write some more XHTML and CSS code.
However, the best part is: NO Images or Javascript.
<div class="content">
<div>Round filled curvy corners</div>
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
Here's the CSS:
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.content {background: #ddd;}
.content div {margin-left: 5px;}
The idea by Benogle, is to make 5 pixels of varying margins on the left and right side. It's very smart and it comes out nicely.
Method #1: JavaScript Solution
Now this I believe is the number 1 method to make rounded rectangles.
I prefer JavaScript solutions, because I cannot believe there exists people in this planet who would disable JavaScript. This one is very simple and I really want to thank the programmer for making this Curvy Corners JavaScript Solution.
Their solution is simple, just add the JS file to your <head> section:
Then on the CSS box you want to style, write the code as you would for non-IE browsers and CurvyCorners will adjust the div for IE as well:
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
That's it!
epsylon2 (not verified)
Method #2: Pure CSS Solution
Method #2: Pure CSS Solution dont work in IE (6+7). A 1Pixel-Shift at the top ocurs
Dodd (not verified)
Awesome article. Thank you
Awesome article. Thank you for these tricks.
badmash (not verified)
I just signed up to your
I just signed up to your blogs rss feed. Will you post more on this subject?
Post new comment