a digital blog

HTML

CSS Rounded Corners Without Images for All Browsers

CSS Rounded Corners Without Images for All Browser

This post explains you about how to create CSS Rounded Corners Without Images.

A simple CSS technique of rounding off the corners of the DIV using some css attributes. This technique will work in all browser.

div {
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 border: 1px solid;
 }

Result:-

Hi Hello Everyone

 

To make only One corner rounded, use following CSS.

div {
 -moz-border-radius-topright: 10px;
 -border-top-right-radius:10px;
 -webkit-border-top-right-radius: 10px;
 border: 1px solid;
}

Result:-

Hi Hello Everyone

 

Above css does not work with ie 6, ie 7 and ie 8.

So for this you need some java script hacks. So click here and download border-radius.htc from download  section (left side under Featured category) and add change css code.

div {
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 border: 1px solid;
 behavior: url(/css/border-radius.htc);
 }

3 Comments

  1. “Above css does not work with ie 6, ie 7 and ie 9.”
    I think you mean IE8, IE9 does support rounded corners

    • Admin

      Hi Mike,

      Actually it is my typo error and it is IE8 not IE9.

      IE9 already supported rounded corners, and for IE6, IE7 and IE8 you need some java scripts hacks.

  2. Keep functioning ,remarkable job!
    black hat seo


*

Copyright © 91 Web Lessons - a digital blog