I have some images and I want to show them on my webpage. But the problem is that I want to make their corners rounded. The deepness of rounded corner depends, some time I want decent round corners and some time I want very deep round corners so that it appear a circular image.
What is right way to do this?
Add a comment
|
4 Answers
You can use following css:
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Note:- This will not work in IE except IE9.
6 Comments
Emil Vikström
Actually, IE 9 supports border-radius.
Harry Joy
@Emil: Yes it does. but peoples has not started to use IE9 especially with windows XP. Updated answer.
Amit
@Harry: IE is very popular , so we can't leave it. have you any other solution (IE compatible).
Harry Joy
@jams: for IE use Curvy Corner. It's javascript solution. Also see this discussion: jonraasch.com/blog/css-rounded-corners-in-all-browsers
Amit
@Harry:All these are talking about round corners, but what about circular image?
|
/* Gecko browsers */
-moz-border-radius: 5px;
/* Webkit browsers */
-webkit-border-radius: 5px;
/* W3C syntax - likely to be standard so use for future proofing */
border-radius: 5px;
Use all 3 to ensure the most compatibility. IE7 and IE8 don't support border-radius except IE9. However There are JavaScript hacks, most involve a heap of 1px elements absolutely positioned or use SVG.
1 Comment
Amit
IE is very popular , so we can't leave it. have you any other solution (IE compatible).
Rounded corners are not supported by some major browsers (ok maybe one major browser which is ... yes IE). The only way to get a cross browser solution is to use a jQuery plugin to round the corners.
Comments
Go here
Here automatically generates all browser specific CSS
http://css3generator.com/
or
