CSS Rounded Corners for All Major Browsers | Lessoncup Programming Blog

Wednesday, 9 October 2013

CSS Rounded Corners for All Major Browsers

Without the need for corner images or the use of multiple div tags Rounded Corners are very easy it is just few lines of CSS3 code and it will work in all major browsers.In CSS3, creating rounded corners is easy the border-radius property is used to create the rounded corners.Rounder corners can be created independently using the four individual border-*-radius properties and we can control the LEFT-RIGHT-BOTTOM and TOP Corners also.

Step 1

Write the few lines on CSS code inside the HEAD tag.
#corner{
border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #06C; 
height:30px;
width:200px;
}



#corner-top-right{
border-top-right-radius:10px;
-moz-border-radius-topright:10px;
-o-border-radius-topright:5px;
-webkit-border-radius-topright:5px;
border:1px solid#06C;
height:30px;
width:200px;

}

Step 2

in HTML Code

1 comment :

  1. This solution works fine in IE too, check it:

    In your CSS:

    #rounded_corners{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;

    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;

    behavior:url(border-radius.htc)
    }

    And add the file "border-radius.htc" from here: https://code.google.com/p/curved-corner/downloads/detail?name=border-radius.htc

    Regards!!

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons