Round Corner Border with CSS without image

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

Written by Bala Krishna

Bala Krishna is web developer and occasional blogger from Bhopal, MP, India. He like to share idea, issue he face while working with the code.

This article has 2 comments

  1. Sherilyn Jersey

    Just landed on this place via Google seek. I love it. This post switch my percept and I am getting the RSS feeds. Cheers.

  2. Affiliate Guidebook

    Just what I was searching for! I was searching articles for our blog when I came across your post (on Round Corner Border with CSS without image | Bala-Krishna) which I found on Google. We would love you to write for us, if interested. I’ve bookmarked this post for future reference. Nice comments here as well – Cheers from Affiliate Guidebook