Skip navigation
Currently Being Moderated

Latest thinking re:rounded corners with CSS?

Feb 18, 2011 2:59 PM

Paula recently posted a summary of the rounded corner CSS and I'm unable to find it.  How about doing it again, PZ?

 

Also, what's the best workaround you've found for IE?

 
Replies
  • Currently Being Moderated
    Feb 18, 2011 3:22 PM   in reply to MurraySummers

    Also, what's the best workaround you've found for IE?

    Ignoring it entirely.  :-)

     

    .htc works on simple layouts, but Al Sparber is going to spank me for mentioning it.

    http://alt-web.com/DEMOS/CSS-Rounded-Corners.shtml

     

     

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 18, 2011 3:41 PM   in reply to MurraySummers

    Hi Murray,

     

    my favorite in this case:http://forums.adobe.com/message/2957388#2957388

    Sorry, the discussion did get a little 'off-topic', but that is also what these forums are for.

    What everyone is saying is that yes, it can be done, but not in a reliable cross browser method. Even using tables has its problems which is o/k for personal web site, but not for commercial sites that you may construct.


    The idea of using images is at the moment the most cross browser method, but using css3 and letting IE6-8 display without the drop shadow would be the simplest.


    PZ

     

    Hans-G.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 18, 2011 4:06 PM   in reply to MurraySummers

    I'm telling!

     

    Tattletale.  

     

    This may not be what Paula posted, but it summarizes border-radius syntax for Opera, WebKit and Mozilla.

    http://www.the-art-of-web.com/css/border-radius/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2011 12:23 AM   in reply to MurraySummers

    Hi Murray

     

    I will re-do a post on the subject, as the thinking has changed a lot over the last few months, especially since the release of the jQuery Mobile framework, and the use of things like htc as a 'fix' for IE<9 is now the recommended norm, (as this is then ignored by IE9, so no IECC required).

     

    Paula

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2011 7:12 AM   in reply to MurraySummers

    Hi Murray

     

    I have created a dreamweaver cookbook item for this, (will be easier to find and edit as thinking on this changes).

    The link is - http://cookbooks.adobe.com/post_Rounded_Corners___Border_Radius__css3_ and_IE_versi-18564.html.

     

    Hope this helps, and if you, (or anyone else) have any comments/recommendations regarding the item please let me know.

     

    Paula

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2011 7:55 AM   in reply to MurraySummers

    Hi Murray

     

    IE9 can support rounded corners on any corner by using the corner specific mark-up:

     

    border-top-left-radius : Radius_value;

     

    border-top-right-radius : Radius_value;

     

    border-bottom-right-radius : Radius_value;

     

    border-bottom-left-radius : Radius_value;

     

    You can find examples of most of the new css3 properties supported by IE9 here - http://msdn.microsoft.com/en-gb/ie/ff468705.aspx#_CSS3_BG_Borders, along with other information specific to IE9.

     

    As for the htc or jQuery fixes for older versions of IE, I would advise applying these to the lowest number of corners/items possible.

     

    Paula

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2011 8:25 AM   in reply to MurraySummers

    Bring up the topic on our private forum and ask Gerry to explain the

    shortcomings to you. We've analyzed Microsoft VML years ago. It's like

    using the Forges of Hephaestus to make a thumbtack.

     

    Progressive enhancement. If a client cannot accept that, then a designer

    is not doing an adequate job of explaining things. But if a designer

    accepts a hack like this without understanding the drawbacks, then he or

    she probably is incapable of educating a client.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    Dreamweaver Menus | Galleries | Widgets

    http://www.projectseven.com/go/hgm

    The Ultimate Web 2.0 Carousel

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2011 10:08 AM   in reply to MurraySummers

    Yes, the HTC is using VML. Also, inside the HTC file is, um, a

    javascript

     

    There is no other way to do border radii without images in IE8 and

    under. The VML is actually drawing a picture, much as you would do with

    SVG. Actually, SVG is one of those things where folks followed

    Microsoft, but changed the name so as not to curtsy to the evil empire.

     

    It was, however, never intended for this purpose. It is a hack and it

    can easily come unglued on complex pages.

     

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    Dreamweaver Menus | Galleries | Widgets

    http://www.projectseven.com/go/hgm

    The Ultimate Web 2.0 Carousel

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2011 11:43 AM   in reply to MurraySummers

    Hi Murray

     

    As I say in the article, (and as pointed out by Al) all the IE none css3 methods rely on vml, (without using images and divs) and one uses them only after a lot of testing as they may have an adverse affect on functionality.

     

    But even though I agree with Al, in that one should opt for the 'progressive enhancement' approach for IE < 9, if one must support IE < 9 then their use is the only simple x-IE-browser method and no worse than using svg for backgrounds, (supported in IE9 and Opera, and will be supported in FF and webkit).

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2011 11:55 AM   in reply to pziecina

    Hi Paula,

     

    VML is creating elements - and that's what creates the stability issues.

    Those created elements, which create the curves, need to be redrawn as

    the document dimensions change - which could be due to resizing the

    window or adding content or using a widget. It is not as simple as you

    seem to think.

     

    jQuery plugins like some of the tooltip ones that use VML to create

    rounded boxes for IE go way, way further than this little script inside

    the HTC file to ensure the curves stay with their parent. And the jQuery

    tools that use this method create constraints that limit their features.

    We know, believe me

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    Dreamweaver Menus | Galleries | Widgets

    http://www.projectseven.com/go/hgm

    The Ultimate Web 2.0 Carousel

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2011 12:02 PM   in reply to Al Sparber

    Hi Al

     

    I'm agreeing with you

     

    Paula

     

    Added: I am just saying that we can expect further problems along this line when people start using svg for backgrounds.

     

    Message was edited by: pziecina

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2011 12:13 PM   in reply to pziecina

    Hi Paula,

     

    Thanks for the cookbook posting.  I've bookmarked it.  One more thing I would like to see added is a mention about the odd syntax required by Mozilla. This has tripped up more than a few people (including me).

     

    CSS3 (Opera browser) Mozilla equivalent WebKit equivalent
    border-top-right-radius-moz-border-radius-topright-webkit-border-top-right-radius
    border-bottom-right-radius-moz-border-radius-bottomright-webkit-border-bottom-right-radius
    border-bottom-left-radius-moz-border-radius-bottomleft-webkit-border-bottom-left-radius
    border-top-left-radius-moz-border-radius-topleft-webkit-border-top-left-radius
    border-radius-moz-border-radius-webkit-border-radius

     

    Finally, re the  .HTC hack from Google Code . It works when all corners in a division share the same value. But it fails miserably when they don't.  Working example:  http://alt-web.com/DEMOS/CSS-Rounded-Corners.shtml.  IE users will see a normal box.

     

     

    Thanks,

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2011 12:33 PM   in reply to Nancy O.

    Hi Nancy

     

    I did not think to include the odd syntax for firefox as the version 4 should, (how often have we heard that) be standard compliant, but if you do not mind I will copy your usage table into the cookbook posting?

     

    I have also just added a new link regarding a htc file that adds 2 more css3 properties, - http://fetchak.com/ie-css3/, and whilst this also uses vml, it does add better, (more stable) vml support and functionality to the older IE browsers, border-radius, (again only for all 4 corners) box-shadow and text-shadow. The last two could be done using IEFilters but as the use of IEFilters is even more complex/controversial than using vml, the inclusion of the link may help others when used with extensive testing, I will repeat for the non-professionals that may be reading this, test, test, and test again when using such items.

     

    Paula

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2011 1:21 AM   in reply to MurraySummers

    Hi Murray

     

    No one ever said that rounded corners are simple, and just to prove it Mozilla decided to implement their own format .

     

    Anyway to change the subject slightly -

    For those who may not already know, I did work for the dreaded evil empire, (Microsoft) a number of years ago and one of the people I know from then was a member of the team that developed vml, (he also helped write the specs submitted to the W3C for vml, and some IEFilters), so due to the debate on using vml for rounded corners I asked him his opinion, (I normally would not do so) and the opinion of a few others, (one is a developer on the webkit project), and here is a brief summing up.

     

    From the vml developer - VML was developed to be used and script manipulated in a similar fashion to the canvas api and svg, and can be used quite safely for the creation of rounded corner graphics, but just like any other browser graphic drawing interface, (canvas and svg) the use should always be tested.

     

    From the webkit developer - VML was in his opinion a better option than svg, and not using this when necessary would be like ignoring the html5 canvas completely because it produces undesirable results in some circumstances.

     

    But both say, (as I have also pointed out in the article) if it works in your circumstances, use it, not to do so is like ignoring gif's because we can now use png's.

     

    Paula

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2011 5:06 AM   in reply to MurraySummers

    Murray *ACP* wrote:

     

    Paula recently posted a summary of the rounded corner CSS and I'm unable to find it.  How about doing it again, PZ?

     

    Also, what's the best workaround you've found for IE?

     

    There isn't a work around for IE7/8 unless you use images. All the css/htc methods I tested WILL break down somewhere along the line depending entirely on how simple or complex the layout gets. The layout doesn't have to get that complex believe me.

     

    Al is correct - use images otherwise youre in for a nightmare...you won't know when BUT htc method will interfere with some jquery scripts or vice versa. Its images until 7 and 8 are dead I'm afraid OR ignore 7/8 in favour of other browsers that use css (But that aint an option as far as I'm concerned)

     

    Or just do a very simple layout but that really quite restrictive.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 1, 2013 6:07 AM   in reply to Nancy O.

    Good Morning Nancy

     

    Are you saying that just by using these four lines I can get  rounded corners ?   I tried but nohing happened.  

     

    {

    -moz-border-radius: 20px;

    -webkit-border-radius: 20px;

    -khtml-border-radius: 20px;

    border-radius: 20px;

    }

     

    Are there other  CSS properties hidden in a file ?

     

    Thanks for your help, as always.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 1, 2013 6:49 AM   in reply to yenguru

    yenguru wrote:

     

    Good Morning Nancy

     

    Are you saying that just by using these four lines I can get  rounded corners ?   I tried but nohing happened.  

     

     

    Well you have to specifically apply them to something like:

     

    #myBox {

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    background-color: red;

    color: #fff;

    width: 200px;

    height: 200px;

    }

     

    <div id="myBox">This box has rounded corners</div>

     

     

    Supported by IE9 upwards and Firefox, Safari, Chrome

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 1, 2013 6:57 AM   in reply to osgood_

    Thanks osgood.

     

    I was trying to make my whole page with rounded corners.   So should I put it on my <head> section ?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 1, 2013 7:42 AM   in reply to yenguru

    yenguru wrote:

     

    Thanks osgood.

     

    I was trying to make my whole page with rounded corners.   So should I put it on my <head> section ?

    Whole page? What do you mean by whole page?

     

    If you want the outer four corners of your page to have rounded corners then you need to wrap the rest of the html content in a <div>

     

    <div id="pageWrapper">

     

    The rest of your html code (the bit which is inside the <body></body> tags) goes here.

     

    </div>

     

     

    Then style the pageWrapper

     

    #pageWrapper {

    -moz-border-radius: 20px;

    -webkit-border-radius: 20px;

    border-radius: 20px;

    background-color: red;

    }

     

    Is that what you are trying to achieve?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 1, 2013 7:48 AM   in reply to osgood_

    Thanks.  Yes that was what I was trying to do.    Let me try your code and confirm back to you.  Thanks for the quick reply.   Have a great weekend.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2013 11:33 AM   in reply to yenguru

    The technique DOES NOT work for rounding the edges of tables, which you have used for your construction.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2013 11:39 AM   in reply to osgood_

    I see.  Thanks my friend.   Sorry for the trouble.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2013 11:44 AM   in reply to yenguru

    yenguru wrote:

     

    I see.  Thanks my friend.   Sorry for the trouble.

     

    No trouble. To round the corners when using tables you will have to resort to the old method of using images. Any reason for using tables as a construction method, they are well passed their sell by date for building a website?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2013 11:46 AM   in reply to osgood_

    Actualy what I was trying to do was Nancy's example

     

    http://alt-web.com/DEMOS/CSS-Rounded-Corners.shtml

     

    The centre box has rounded corners.  That's what I wanted to do.  Here is the code that I used.

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

     

     

    <title></title>

     

     

    <style type="text/css">

    <!--

    .BG {

     

              background-color: #F0E8DB;

              -moz-border-radius: 20px;

              -webkit-border-radius: 20px;

              border-radius: 20px;

              background-color: #000000;

              border-bottom-color: #000000;

     

    }

    .style1 {font-family: Catull}

    .style3 {

              font-size: 18px;

              font-family: Catull;

              font-weight: bold;

    }

    .style4 {

              font-family: Cambria;

              font-size: 14px;

              color: #663300;

    }

    -->

    </style>

    </head>

     

     

    <body><center>

     

     

     

     

     

    <table width="1604" border="0" cellpadding="0" cellspacing="0" class="BG">

     

     

     

     

      <!--DWLayoutTable-->

      <tr>

        <td width="290" height="31"> </td>

        <td width="1003"> </td>

        <td width="311"> </td>

      </tr>

      <tr>

        <td height="367"> </td>

        <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#00FF00">

          <!--DWLayoutTable-->

          <tr>

            <td width="1003" height="367" valign="top"><!--DWLayoutEmptyCell--> </td>

          </tr>

        </table>

        </td>

        <td> </td>

      </tr>

      <tr>

        <td height="1081"> </td>

        <td> </td>

        <td> </td>

      </tr>

    </table>

    </center>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2013 7:36 PM   in reply to yenguru

    Have a look here http://compass-style.org/examples/compass/css3/border_radius/

     

    To help you with SASS, have a look here http://pleysier.com.au/sass_article.php.

     

    Note the rounded corners of the page.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2013 11:08 PM   in reply to yenguru

    yenguru wrote:

     

    Actualy what I was trying to do was Nancy's example

     

    http://alt-web.com/DEMOS/CSS-Rounded-Corners.shtml

     

    The centre box has rounded corners.  That's what I wanted to do.  Here is the code that I used.

     

     

    As I said it wont work with tables only with <divs>. Example below:

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

     

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

     

    <html xmlns="http://www.w3.org/1999/xhtml">

     

    <head>

     

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

     

     

     

    <title></title>

     

     

     

     

     

    <style type="text/css">

     

    <!--

     

    .BG {

    background-color: #F0E8DB;

    width: 500px;

    height: 500px;

    -moz-border-radius: 20px;

    -webkit-border-radius: 20px;

    border-radius: 20px;

    background-color: green;

    border-bottom-color: #000000;

    margin: 0 auto;

    padding: 20px;

    color: #ffffff;

    text-align: center;

    }

    -->

     

    </style>

     

    </head>

     

    <body>

     

    <div class="BG">

    This box has rounded corners

    </div>

     

     

    </body>

     

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2013 11:16 AM   in reply to osgood_

    I disagree with Osgood's statement that rounded borders only work on Div tags. Not true.  You can style tables and even table cells with rounded borders.  Here's how:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Rounded borders</title>
    <style type="text/css">
    
    table.rounded {
    width: 700px;
    margin: 35px auto;
    border: 4px solid coral;
    background: yellow;
    /**ROUNDED BORDERS**/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    }
    
    table.rounded td {
    width: 50%;
    padding: 12px;
    background:#FFF;
    border: 1px solid teal;
    /**ROUNDED BORDERS**/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    
    }
    </style>
    </head>
    
    <body>
    <table class="rounded" cellspacing="10">
    <tr>
    <td>table cell 1</td>
    <td>table cell 2</td>
    </tr>
    <tr>
    <td>table cell 3</td>
    <td>table cell 4</td>
    </tr>
    </table>
    </body>
    </html>

     

    Here's a screenshot: 

    table-rounded-borders.jpg

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2013 11:38 AM   in reply to Nancy O.

    Hi Nancy,

     

    great and many thanks!

     

    An interesting phenomenon I found: my DW fed with your code does show rectangular shapes, when I use design view, in live view contrast to it, it works like a charm! Loaded up to my server, all is ok too!

     

    My replica of your code can be used as a evidence. Here is the link:

     

    http://www.hansgd.de/AdobTest/roundedCornerNan/roundedCornerNanNeu2013 02.php.

     

    Hans-Günter

     

    
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2013 11:51 AM   in reply to hans-g.

    That's correct, Hans.

    Design View does not support vendor prefixes (-webkit, -moz, -khtml).  Always test in Live View or Preview in browsers.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2013 12:20 PM   in reply to Nancy O.

    Nancy O. wrote:

     

    I disagree with Osgood's statement that rounded borders only work on Div tags. Not true.  You can style tables and even table cells with rounded borders.  Here's how:

     

    Hi Nancy,

     

    I stand corrected, shows you how much I use tables!

     

    Good to know though just in case I need to throw in a table of two somewhere along the way.

     

     

    Edit: I think I was trying it with an image in the table cell, that would make a difference would'nt it? Would need to use it applied as a bg image, right?

     

    I guess in that case you could combine the two:

     

    .rounded, img {

        -moz-border-radius: 10px;

        -webkit-border-radius: 10px;

        border-radius: 10px;

    }

     

    Interesting stuff, just shows you have to keep experimenting and exploring all possibilities.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2013 4:10 PM   in reply to Nancy O.

    Excellent Nancy.  You are the best.  Always to my rescue.  Thanks a million. 

     

    This was what I was looking for.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 5, 2013 9:15 AM   in reply to Nancy O.

    Thanks nancy,

     

    and of course I had no idea what these "vendor prefixes" are and maybe there are more people like me. And so they may be interested to this blog (e.g.):


    http://demosthenes.info/blog/217/CSS3-Vendor-Prefixes

     

    Hans-Günter

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points