CSS3 – Rounded corner button background

Here is an example which styles an HTML a link with a rounded corner button background.

<html>
  <head>
    <style type="text/css">
      #rounded {
        -moz-border-radius: 6px;    /* Firefox */
        -webkit-border-radius: 6px; /* Chrome & Safari */
        -khtml-border-radius: 6px;  /* Linux browsers */
        border-radius: 6px;         /* CSS3 */
        background-color: #FBBC17;
        padding: 4px;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <a id="rounded" href="http://eureka.ykyuen.info">Eureka!</a>
    </div>
  </body>
</html>

 

This works perfectly on all browsers except on Internet Explorer.

 

Luckily there is an workaround for IE. Go to download the border-radius.htc @ Google code – curved-corner

Update the .html as follow

<html>
  <head>
    <style type="text/css">
      #rounded {
        -moz-border-radius: 6px;    /* Firefox */
        -webkit-border-radius: 6px; /* Chrome */
        -khtml-border-radius: 6px;  /* Linux browsers */
        border-radius: 6px;         /* CSS3 */
        background-color: #FBBC17;
        padding: 4px;
        behavior: url(border-radius.htc); /* IE FIX */
      }
    </style>
  </head>
  <body>
    <div id="main">
      <a id="rounded" href="http://eureka.ykyuen.info">Eureka!</a>
    </div>
  </body>
</html>

 

Try again on the greatest browser.

 

Done =)

Reference: Google code – curved-corner

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.