CSS: Cross-browser Rounded corner HTML elements using CSS3

http://code.google.com/p/curved-corner/

border-radius-demo.zip

border-radius.htc

This is a behavior htc file for Internet explorer to make CSS property ” border-radius ” work on all browsers. At present, all major browsers other than IE shows curved corner by adding the first 4 lines of css:

.curved {

-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari and chrome */
-khtml-border-radius:10px; /* Linux browsers */
border-radius:10px; /* CSS3 */
behavior:url(border-radius.htc) /* IE *

}

Adding the htc with one more line of css will make the curve work in IE browsers also behavior:url(border-radius.htc)

More details are on http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

==============================

Round corner top right:

{

-moz-border-radius-topright: 10px;

-khtml-border-radius-topright: 10px;

-webkit-border-top-right-radius: 10px;

border-top-right-radius: 10px;

}

==============================

Table of CSS3 border-radius Compliance (visual illustration) Really nice!

==============================

Note:

If you are calling in a .htc file you have to use the absolute path:

img {behavior: url(“http://www.corephp.com/templates/corephp/pngbehavior.htc”);}

If you are using a filter you also have to use an absolute path:

#top-shadow {

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://www.corephp.com/templates/corephp/images/top_shadow.png’, sizingMethod=’scale’);

}

==============================

How to fix common problems:

I’ve pasted in the CSS but my round corners don’t show!

Make sure you remember that the path to the HTC file is relative to the HTML file, not the CSS file (like CSS background images are). If you want to test the path, insert this: alert(‘This works!’); into the .HTC file.

It works offline but not online.

First try unzipping this default demonstration and uploading to your web server as-is. If it doesn’t work, you may have a MIME type problem. You must ensure your server is sending the correct MIME type of “text/x-component” for .HTC files. Try one of these two easy fixes:

  1. Add the line below to your “.htaccess” file, which will make Apache send the correct MIME type:
    AddType text/x-component .htc
  2. Instead of calling “border-radius.htc” from your CSS, create file “border-radius.php” in the same folder and call that instead, which also sends the right MIME type. Below is the content of “border-radius.php”:
    <?php
    // Use this file in your CSS in place of the .HTC file if it works offline but not online.
    // It will send the correct MIME type so that IE will execute the script correctly.
    header(‘Content-type: text/x-component’);
    include(‘border-radius.htc’);
    ?>

==============================

An example:

/* Create a div.heading with round corners on the top-left, and bottom-right, and the text inside has shadow */

.heading {

width:245px;

height:23px;

margin:0 auto;

margin-bottom: 15px;

padding-top:7px;

padding-left: 25px;

background: #002340;

text-shadow: 1px 1px 1px #000000; /* Shadow for text in div.heading */

border-right:1px solid #000000;

border-bottom:1px solid #000000;

/* optional rounded corners for browsers that support it */

-moz-border-radius-topleft: 30px;  /* Firefox */

-moz-border-radius-bottomright: 30px;  /* Firefox */

-khtml-border-radius-topleft: 30px; /* Linux browsers */

-khtml-border-radius-bottomright: 30px; /* Linux browsers */

-webkit-border-top-left-radius: 30px; /* Safari and chrome */

-webkit-border-bottom-right-radius: 30px; /* Safari and chrome */

border-top-left-radius: 30px;  /* CSS3 */

border-bottom-right-radius: 30px;  /* CSS3 */

behavior:url(‘border-radius.htc’) /* IE */

}


.heading p {

color: #6dcff6;

/* Shadow for text in div.heading, for IE browser only*/

filter: Shadow(Color=#000000,

Direction=135,

Strength=2);

}

Advertisements

8 Comments

  1. Posted May 7, 2010 at 1:53 pm | Permalink

    The corner radius issue of IE gonna solve.

    http://kbala.com/ie-9-supports-corner-radius/

  2. Posted May 16, 2010 at 10:51 pm | Permalink

    That was very helpful. You rocks!

    Do you know how can I include border-radius.htc file in .Net Project. I am getting file path issue, when page is URL Rewritten (i.e. Actual Absolute URL Doesn’t exist)

    Any idea how can i solve this issue?

    • nachopitt
      Posted August 24, 2010 at 7:03 pm | Permalink

      Michelle. The only way I found to be able to make it work using url rewritting is using an absolute URL like if it was typed in the address bar:

      behavior: url(“http://localhost/site/htc/pngbehavior.htc”);

      Hope that it helps.

  3. Chris
    Posted May 26, 2010 at 10:55 am | Permalink

    Hi,
    I am still stuck with IE8. No rounded corners appear 😦
    Cheers

  4. Posted October 11, 2010 at 3:55 pm | Permalink

    Nice one.Thank you!

  5. stefanie
    Posted November 15, 2010 at 8:18 pm | Permalink

    What do I have to do for making it working in a wordpress installation?
    In which directory I have to copy the border-radius.htc?
    I tried out several ways but they didn’t work.

    Thanx

  6. Sparky
    Posted January 4, 2011 at 11:51 am | Permalink

    looks like it doesn’t work with wordpress

  7. Posted January 27, 2011 at 10:24 pm | Permalink

    It works with wordpress!

    Put a conditional comment in header just before head closing.
    you must call the .htc with absolute path!

    than you have to pay attention with the z-index of the “container”, “wrapper” or “whatever” which contain the div you want to make round.

    Example:
    “”

    #access {
    behavior: url(/test/border-radius.htc);
    border:none;
    }
    #wrapper {
    position:relative;
    z-index:-5;
    }

    “”

    Sorry for my bad english

    Ciao

%d bloggers like this: