Free Web Hosting

Round Corner Border with CSS without image

March 20th, 2008 Bala Krishna Posted in Blogging, Browser Stuff, CSS, Tips and Tricks, Web Design, Web Development, Web Technology No Comments »

A lot of investigation on CSS and finally i came to the point that at this time round curve border with CSS not possible. We have to use image for round curve effect. However, According to W3C CSS3.0 specification it will be possible in near future with border-radius property. CSS3.0 still in draft status so this property not compatible with available browser this time.

Border Radius Property Syntax:
border-radius: <length> <length>

Individual corners Property Syntax:
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

While googling i found few interesting URL that might be useful for the visitors who want to implement round corner border anyway.

Tool to generate HTML/CSS code and images for rounded corners:

http://www.roundedcornr.com/

CSS Rounded Corner Border Tricks:
http://www.alistapart.com/articles/customcorners/
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml

AddThis Social Bookmark Button