Rounded Corners in CSS3

86

strong>Since it’s been snowing in Nottingham today and I’ve come down with a cold, I’ve been staying indoors, Although during College, all of us have been playing in the snow (Don’t judge, we’re all still young at heart!) but I’ve been playing around with the rounded corners effect in CSS3, now in my article Getting ready for CSS3 I listed a few major additions that CSS3 will bring to the web, I mentioned Shadows, multiple backgrounds and some more, but another great addition in CSS3 will be rounded corners.

Before you read on you must be aware that support for CSS3 in browsers is scattered all over the place, to be specific only Mozilla and Safari browser users will be able to view the rounded corners effect correctly, because Mozilla is using it’s own method of border-radius and Safari is using the Web-Kit, which has various CSS3 elements bundled in. Im unsure if any other browsers have the border-radius element or any of the web-kits built in, so if you can’t see the rounded effect the reason for it is your browser doesn’t support it! However if you do find browsers other than Mozilla or Safari supporting the border-radius element, message me

Declarations in Mozilla:

CSS3 is mainly present in Mozilla and Safari, we already know this, but to create rounded corners mozilla does not use the same methods as Safari, infact Mozilla uses different declarations:

-moz-border-radius: 10px;  /*Produces Fully Rounded Effect*/
-moz-border-radius-topleft:10px;  /*Top Left Corner Rounded*/
-moz-border-radius-topright:10px;  /*Top Right Corner Rounded*/
-moz-border-radius-bottomleft:10px;  /*Bottom Left Corner Rounded*/
-moz-border-radius-bottomright:10px;  /*Bottom right Corner Rounded*/

Declarations in Safari:

Safari is using the traditional web-kit so the declarations will differ to mozilla’s:

-webkit-border-radius: 10px;  /*Produces fully rounded effect*/
-webkit-border-top-left-radius:10px;  /*Top Left Corner Rounded*/
-webkit-border-top-right-radius:10px;  /*Top Right Corner Rounded*/
-webkit-border-bottom-left-radius:10px;;  /*Bottom Left Corner Rounded*/
-webkit-border-bottom-right-radius:10px;  /*Bottom Right Corner Rounded*/

(Noticed how the Syntax Highlighter can not highlight any of the webkit or moz attributes as they are strictly CSS3, again the support for CSS3 isn’t 100% yet)

Creating rounded borders:

Having to include two different declarations in your CSS code is going to get annoying, but if we reference to CSS2 the only way to get rounded corners currently is to create a image with a rounded edge and then apply it as a class CSS (Usually by using positioning) but CSS3 is making it much simpler, by using a straight attribute to create the effect.

All corners rounded (HTML):

<div id="container1">
 <div class="content">
 <h3>Fully rounded!</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan iaculis sapien. Vivamus ipsum nulla, sollicitudin eu, iaculis vestibulum, dignissim eget, tortor. Cras elementum eros et mauris. Aliquam ut nibh id magna pellentesque faucibus. Cras purus velit, venenatis eu, dapibus ac, sodales ut, nisl. Phasellus volutpat pellentesque lectus. Aliquam sit amet felis vitae mauris dictum laoreet. Mauris vel neque sit amet justo facilisis ultricies. Duis tempus sem sit amet purus. Donec commodo posuere nulla. Donec euismod sollicitudin arcu.</p>

 <p><strong><em>All of the corners are rounded</em></strong></p>
 </div>
</div>

Apply this CSS to get the effect:

#container1 {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width:500px;
background:#eeeeee;
border-color:#DEDEDE;
}

.content {
padding: 10px;
}

The Result:

fully rounded

All corners but one rounded (HTML):

<div id="container2">
 <div class="content">
 <h3>Three Quarter Rounded</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan iaculis sapien. Vivamus ipsum nulla, sollicitudin eu, iaculis vestibulum, dignissim eget, tortor. Cras elementum eros et mauris. Aliquam ut nibh id magna pellentesque faucibus. Cras purus velit, venenatis eu, dapibus ac, sodales ut, nisl. Phasellus volutpat pellentesque lectus. Aliquam sit amet felis vitae mauris dictum laoreet. Mauris vel neque sit amet justo facilisis ultricies. Duis tempus sem sit amet purus. Donec commodo posuere nulla. Donec euismod sollicitudin arcu.</p>
 <p><strong><em>All corners beside the bottom left are rounded</em></strong></p>

 </div>
</div>

Apply this CSS to get the effect:

#container2 {
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius:10px;
border: 1px solid #000;
width:500px;
background:#e7e7e7;
border-color:#DEDEDE;
}

.content {
padding:10px;
}

The Result:

three quarter rounded

Top two corners rounded (HTML):

<div id="container3">
 <div class="content">
 <h3>Half Rounded</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan iaculis sapien. Vivamus ipsum nulla, sollicitudin eu, iaculis vestibulum, dignissim eget, tortor. Cras elementum eros et mauris. Aliquam ut nibh id magna pellentesque faucibus. Cras purus velit, venenatis eu, dapibus ac, sodales ut, nisl. Phasellus volutpat pellentesque lectus. Aliquam sit amet felis vitae mauris dictum laoreet. Mauris vel neque sit amet justo facilisis ultricies. Duis tempus sem sit amet purus. Donec commodo posuere nulla. Donec euismod sollicitudin arcu.</p>
 <p><strong><em>The top two corners are rounded</em></strong></p>
 </div>
</div>

Apply this CSS to get the effect:

#container3 {
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius:10px;
width:500px;
background:#eeeeee;
border-color:#DEDEDE;
}

.content {
padding:10px;
}

The Result:

half rounded

Left corner rounded (HTML):

<div id="container4">
 <div class="content">
 <h3>Quarter Rounded</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan iaculis sapien. Vivamus ipsum nulla, sollicitudin eu, iaculis vestibulum, dignissim eget, tortor. Cras elementum eros et mauris. Aliquam ut nibh id magna pellentesque faucibus. Cras purus velit, venenatis eu, dapibus ac, sodales ut, nisl. Phasellus volutpat pellentesque lectus. Aliquam sit amet felis vitae mauris dictum laoreet. Mauris vel neque sit amet justo facilisis ultricies. Duis tempus sem sit amet purus. Donec commodo posuere nulla. Donec euismod sollicitudin arcu.</p>
 <p><strong><em>The top left corner is rounded</em></strong></p>
 </div>
</div>

Apply this CSS to get the effect:

#container4 {
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
width:500px;
background:#e7e7e7;
border-color:#DEDEDE;
}

.content {
padding:10px;
}

The Result:

quarter rounded

All the examples shown display a equal rounded corner effect, but because each corner can be defined by the relative attribute you can make unequal rounding if you wanted to.

This is just one of the many great additions in CSS3. For more information on CSS3 head over to CSS3.info to get the latest updates on CSS3 and also more examples of great additions in CSS3

View the Rounded Corner example in this tutorial

Share This:

  • http://fire-studios.com/blog Fire G

    You need to add image and live examples of each effect.

    I’m withholding further comment until then.

  • http://www.stvproductions.net ST Verschoof

    Well Fire G (hilarious), than dont comment James on this nice example of how CSS3 can create easy rounded cornes. I thing he does fine like this! And IE 7 displays the rounded corners without a problem so UPGRADE! We dont f*cking live in the stone adge or the beginning of M$. IE 6 is old, just as Firefox 2.0 is.

    James, Nice job!

  • http://blog.jmwhite.co.uk James

    Thanks ST Verschoof, I tend to avoid talking about CSS3 too much as I can’t stress enough that we’re mainly still in the CSS2 era, but I know creating rounded corners in CSS2 is annoying by having to create a actual rounded corner in a image and the position it. So I thought I’d give the great border-radius attribute some treatment and demonstrate how we will be able to use one attribute to get a rounded effect!

    But I have to disagree on your comment about IE7 displaying rounded corners, IE7 doesn’t support the border-radius attribute (And at the moment neither does IE8) I can only assume that Microsoft will be adding more CSS3 into there next release candidate of IE8.

    Anyway thanks for commenting :)

  • @Mynahbird

    Great Job, James!

    Rounded corners here I come! You provided just what I have been wanting.

    Mahalo Nui Loa ~S~

  • http://blog.jmwhite.co.uk James

    Thanks, don’t forget the border-radius attribute only works in Mozilla Firefox 3 and Safari!

  • shaun

    any way to round corners in IE?

  • http://blog.jmwhite.co.uk James

    The only way to round corners in IE at the moment is by using a image and positioning it via CSS. IE doesn’t support the border-radius CSS3 attribute at the moment.

  • http://www.t2t.re/ Reggie

    Hi James !

    Thanks for your tutorial about round corners. I just keep your examples somewhere in a directory on my HDD. In case I need them later.
    Too bad IE 8 still doesn’t support CSS3.

    Nice Job !

    • http://blog.jmwhite.co.uk James

      Thanks Reggie, im going to be writing more articles on CS3 soon :)

  • http://freecss.info/category/free-css-tutorials/ CSS Tutorials

    CSS3 seems awesome. Can’t wait until its on all the browsers used on the web!

  • http://blog.jmwhite.co.uk James

    Me too, im always reading W3 and css3.info for the latest info on new/updated modules in CSS3, possibly being slightly geeky but I don’t care. CSS3 Ftw!

  • http://photorestorationretouching.com/ photo retouching

    As usual microsoft are lagging behind and not keeping up with the technology that is available.

  • http://blog.jmwhite.co.uk James

    Yes they very much have themselves to blaim. Internet Explorer once reined supreme but now, I wonder why it’s here. Just recently I wrote a whole article about Internet Explorer 8 & CSS3. How they haven’t implemented any of the good juicy stuff such as border-radius, and to be honest CSS3 is going to be the next generation of website development so really IE are missing out big time. Firefox, Safari etc all saw the light and have been implementing various parts of CSS3.

    Can’t wait till CSS3 is fully developed. I’ve seen alot of exciting and even tried a few new modules :)

  • Rob Stathem

    Hi James,

    Fantastic tutorial—I’m always looking for smarter/easier ways to make rounded corners and this is definitely very hip! :-)

    Keep up the GREAT work! I love the CSS tutorials..I’m quite the CSS fanatic these days! As I say, “Love and Embrace” CSS.

    There’s a few others who have still gone the HTML table routine, but that is plain old school. Why haven’t they converted to CSS?

    Thanks,
    Rob

    • http://blog.jmwhite.co.uk James

      Thank you for your kind words Rob!

      There’s defiantly many reasons to get all hyped up about CSS3, and anyone that is using plain HTML still, after the revolutions of CSS, needs to come and visit my tutorials xD

  • Pingback: Rounded Corners in CSS3 | Misr IT Reader()

  • Pingback: Rounded Corners in CSS3()

  • http://itechart.com/Pages/Subsections/FlexDevelopment.aspx Flex Guy

    Cood Job, James! Thanks for post!

  • Pingback: Rounded Corners in CSS3 - Tutorial Collection()

  • semthexx

    you can use huge bullets to get rounded corners….I ha found a tutorial somewhere for it….its works fine tooooooo

  • Rippuku.designs

    Brilliant tutorial (Finally no more images!). But I use Google Chrome, and I get all the borders perfect.

  • http://blog.jmwhite.co.uk James

    Yep, no more images! Im glad Google are also implementing CSS3 into Chrome though. Wsan’t aware of that! Thanks for your comment :)

  • MichaellaS

    tks for the effort you put in here I appreciate it!

  • http://abhijeetnigoskar.co.cc/ abhijeet

    thanks for your such wonderful guidance from which i can easily learn

  • Muthiulhaq

    Hi.. very nice… thanks

  • Arie

    Hey..!! I like it..!! Nice tutorial..!! Hope u make more tutorial about the new css3 like this one.. ;-)

    • http://blog.jmwhite.co.uk James

      Thank Arie!

      I have made a couple more CSS3 Tutorials, you can search Shadow Effect in CSS3 and Multi Column Layouts in CSS3 to find them :)

  • Nina

    Thank you soooo much! This is exactly what I need for a client of mine.

  • http://www.aboutus.org/BOSS_ResurfacingBossResurfacing Boss Resurfacing

    Off topic – Help with PM?
    lost password
    Boss Resurfacing
    Boss Resurfacing

  • http://WhyteTyger.com Kim S

    It appears that IE8 is now supporting more of the CSS3 attributes? I am using IE8 now and was able to see all of your rounded corner samples. Thank you for sharing these tutorials with us.

    • http://blog.jmwhite.co.uk James

      Really? None of the major CSS3 additions have worked in my IE8 only pseudo elements.

  • Chad

    I think the samples are working in IE8 because they are images. As far as I can tell, IE8 doesn’t support the border radius CSS3 elements. If only MS would get this rolling!

  • http://blog.jmwhite.co.uk James

    Yes, I have seen no main CSS3 implementations in IE8. I’ve seen IE rounded corners scripts floating about recently. Perhaps it was just a fluke that you were in IE8 at the time Kim.

    And yes Microsoft really should get into action with IE8 and CSS3, but there recently in my good books as I’ve just got Windows 7 Professional :D

  • http://cyan-light.co.uk/ Apostropartheid

    It’s worth mentioning that both these methods are proprietary, and will result in invalid CSS. If you’re going to use this method anyway, I don’t see why one wouldn’t put an actual border-radius declaration in, just for when browsers, whether they be these or others, add support for it.

  • Jessica McArthur

    Hey, I like your blog, I’m new to building websites so thanks for the really great info.

  • http://www.extendstudio.com/product/flexipanels_css.html Extend Studio

    You can as well try the FlexiPanels CSS – a Dreamweaver extension that generated rounded corner Css boxes without coding. It’s not CSS3, but works on most browsers, including IE6.

  • Laurent

    First thanks James for this article. I new the properties existed, and your post refreshed my memory on the subject.

    Now sorry for the rant but comment like the one made by Extend Studio are so annoying. I think the point of this article is to teach people how to do it ourselves not being dumb down into using an extension that do it for you.

    @Extend studio: You could ask someone else to do your job for you when you at it or maybe in your dream world everyone will be using dreamweaver too.

    I’ll finish with this:
    Give a man a fish and he will eat for a day.
    Teach a man how to fish and he will eat for a lifetime.

  • http://brianvdesign.com Brian

    Great post. I think IE 9’s beta is out. Any idea if MS is finally going to support more CSS3 props?

  • Pingback: 40 CSS effects tutorials | iWebMonster.net Blog()

  • Pingback: Ashley Madison Reviews()

  • Pingback: Bleeding Hemorrhoids Treatment()

  • Pingback: Treatment for Hemorrhoids()

  • Pingback: property & casualty insurance()

  • Pingback: Clickbank reviews()

  • Pingback: Click here()

  • Pingback: free casino slots()

  • Pingback: 1234test.com()

  • Pingback: Bucino Ulje()

  • Pingback: best slots()

  • Pingback: Olivenöl()

  • Pingback: facebook123()

  • Pingback: Free VLC Player Download()

  • Pingback: Inspired By Nature()

  • Pingback: no deposit bonus()

  • Pingback: Tadel()

  • Pingback: Celebrity Blog()

  • Pingback: free us ipad()

  • Pingback: Buy Facebook Fans()

  • Pingback: Leather Swivel Chair()

  • Pingback: Prestashop Templates()

  • Pingback: Buy Guaranteed Facebook Fans()

  • betty3

    Hi James, I appreciate the information you have shared…. though I am still struggling with making this all actually work.  I have added the CSS properties to my html, but nothing happens.  What am I missing?  I am using MS Frontpage 2003.  I’ve tried several times to create rounded corners ….. even when I seem to be copying the code from tutorials exactly as I see it…. nothing happens :(….. Any advice?  

  • betty3

    Hi James, I appreciate the information you have shared…. though I am still struggling with making this all actually work.  I have added the CSS properties to my html, but nothing happens.  What am I missing?  I am using MS Frontpage 2003.  I’ve tried several times to create rounded corners ….. even when I seem to be copying the code from tutorials exactly as I see it…. nothing happens :(….. Any advice?  

  • Pingback: giant twist comfort cs()

  • Pingback: Best Ceiling Fans()

  • Pingback: Buy Guaranteed Facebook Fans()

  • Pingback: Signs of Ectopic Pregnancy()

  • Bharatrao_86

    nice effect………………

  • Bharatrao_86

    nice effect………………

  • Pingback: Buy Facebook Fans()

  • Pingback: Best Finish Nailer()

  • Pingback: control de flotas()

  • Pingback: Wagner Paint Sprayer()

  • Pingback: Sicak Porno()

  • Pingback: Guaranteed Facebook Fans()

  • Pingback: control de flota de vehiculos()

  • Pingback: Fans Facebook()

  • Pingback: Buy Targeted Facebook Fans()

  • Pingback: Facebook Fans()

  • Pingback: Perlly()

  • Pingback: Bart()

  • Pingback: free classifieds()

  • Pingback: cafelearn72()

  • Pingback: Chemie-Toiletten()

  • Pingback: Top Backlinks()