Warning: INSERT command denied to user 'dbo292345962'@'74.208.16.27' for table 'watchdog' query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:12:\"user warning\";s:8:\"%message\";s:400:\"INSERT command denied to user 'dbo292345962'@'74.208.16.27' for table 'captcha_sessions'\nquery: INSERT into captcha_sessions (uid, sid, ip_address, timestamp, form_id, solution, status, attempts) VALUES (0, '98ebe14b95f3b5b0d8dc871fdf65aa0d', '54.211.100.183', 1416659942, 'comment_form', '3ce29573f05cfd068cbba0e57483640b', 0, 0)\";s:5:\"%file\";s:62:\"/homepages/25/d199835659/htdocs/ID/modules/captcha/captcha.inc\";s:5:\"%line\";i:99;}&# in /homepages/25/d199835659/htdocs/ID/includes/database.mysql.inc on line 135
5 Methods for CSS Curvy Corners | Inferno Development

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

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.

.curvy {position:relative; width:250px; background:#9caf9c; color:#000; margin:5em auto;}
#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.

<div class="curvy">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</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:

<!--[if gte IE 7]>
<style type="text/css">
</style>
<![endif]-->

What is interesting is the use of CSS3 attributes for Firefox and Safari.

.box {
    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="link-left"></div>
<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).

.link-left {
  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.

<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
    <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, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.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:

<script type="text/javascript" src="curvyCorners.js"></script>

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:

.myCurvyBox {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

That's it!

epsylon2's picture

Method #2: Pure CSS Solution

Method #2: Pure CSS Solution dont work in IE (6+7). A 1Pixel-Shift at the top ocurs

Dodd's picture

Awesome article. Thank you

Awesome article. Thank you for these tricks.

badmash's picture

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

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.