well
we have some thumbnail and other image which are uploaded and are rectangle…
now when we show it ,we want to display it as round corner(edge) images…may be bleding things with backgroud or using 4 images at corners…
it should not be like rectangular image inside round corner box…
but image should fit perfectly inside even in round edges…
we have seen some site doing it in comments author photos…
how can we acheive it using css?
typo Ryan in webkit border 
thanks
but according to visitor tracker(statcounter) i am using
more than 60% of my users are still using IE…some even IE6…
so some manual method will be better i guess…
as i have already said it is not about just round cornered boxes…
how to adjust or perfectly fit rectangular image inside round corner boxes(may be hiding image corner) is the actual question
any way thanks
well well
this is what i was talking about
http://blog.0tutor.com/post.aspx?id=101
only problem with that seems to be
1)i need to make different size 4 edge images based on actual image and background color
i am trying to tweak for size one…colors i think i cannot tweak that
thanks for replies
googling did helped…(i posted tropic here as must results were on round corners only)
You can do this (IE would be left out, and earlier versions of Opera)
#element
{
-o-border-radius:3px;/*opera*/
-moz-border-radius:3px;/*gecko*/
-webkit-borrder-radius:3px;/*saffy/chrome*/
border-radius:3px;/*all others that support CSS3*/
/*-IE-border...oh wait, IE doesn't support it :D*/
}
Recent editions of Opera support -o-border-radius… The last alternative i can short of writing your own vml script is to use border-radius.htc (i think you can find a version on google labs)
the moral of the story seems to be
it is not possible or atleast not that easy …lol
4 roiunded corners would involve 4 elements, and until multiple backgrounds have support, you’d be looking at a lot of elements (unless you just used border-radius and left out all of IE/Opera :))
I’ve used jQuery rounded corners for cross browser techniques. (Not sure if it’s outdated.)
https://www.franklincovey.com/msb/public/javascript/jquery-corners-0.3/jquery.corners.html
Personally I’d use the CSS3 technique and forget about IE.
what i am talking about is something like this
but not coverting the actual image…
image is rectangle but when it is displayed it is displayed like following
can css do it?
i have found some jquery and js can do it but there is many disadvantage of using js approach for it
any solutions?
Read what has already been posted… and yes, other than raphael.js (which is excellent for these types of visual effects and super light-weight) you will probably find some jQuery library that does it too.
Forgive me for pointing out the obvious, but doing rounded corners in CSS requires using the border-radius property. This is not supported in any version of IE and versions of Firefox older than 3.6 .
To have a cross-browser solution would would have a use a library like raphael.js
simple round corner boxes is not what i want…
if i insert photo inside it
it will be rectangular image inside round corner box
but that is not what i want
please see the image above
thanks
i am planning like
having one div…
having another div with 4 rounded corners(or single transparent image) overlapping the first div using z index…
but it looks and sound too messy and create cross browsers problems…
any pro way?
i have already read that…
i know there is radius property in css…but for you info there are lots of cross browsers problems related to it…
so it is almost similar to no solution at this state…
problems with js file are
they can make things slow
js need to be own…
can create seo problems in some instance
list continues…
so i could not do any thing even reading for first post…
that is not what i want…
And also as the last property of your CSS rule:
behavior:url(border-radius.htc);
can you set the border radius on an image?