Add rounded corners to a rectangle raster image?

The best and simplest way is to use the CSS3 border-radius property: box { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } It works in all modern browsers apart from IE8 (works in the new IE9 though).

The best and simplest way is to use the CSS3 border-radius property: . Box { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } It works in all modern browsers apart from IE8 (works in the new IE9 though).

IE8 was not release that long ago and can be seen as quite modern. Also, how is IE7 handling this? – Gertjan Sep 21 '10 at 9:44 I wonder what would happen if you gave a div rounded corners and made it slightly smaller then the contained image.

Perhaps playing with the overflow property... It might produce the correct effect. – colithium Sep 21 '10 at 9:44 @Sergey, and if you use www.css3pie.com?It enables css3 tricks for older IE's – Stephan Muller Sep 21 '10 at 9:48.

You should be using CSS border-radius for this (as described in another answer). It does work for images. What the previous answer missed is that you can support it in CSS in all browsers, including IE6/7/8 using a wonderful little hack called CSS3Pie.

This is something that's difficult to get right in one browser, let alone all the common ones. I suggest you do your processing on the server side. If you're working with PHP, I know it has a built in image library that can work with semi-transparent png's.

That's your best bet. Simply "crop" it once and save it on the server's file system. Look for an equivalent library if you're not using PHP.(By "crop" I mean add the rounded corners with a nice alpha blending effect fading to a transparent background).

You can always look at using the nifty corners if you need it to work in older browsers also. Or you can use the css border-radius as mentioned above, and just accept that in IE6/7/8 it will be square.

The jQuery plugin lc_roundz should do the job dynamically - even if you want the corners to be transparent (e.g. For use on complex backgrounds, ...). $("image"). Lc_roundz({ radius: 20, // corner-radius newDadSelector: "", // jQuery style selector string to allow attachment anywhere in the DOM.

Empty string will inject the canvas next to the original newid: "%oid_after_lc_roundz", // the new ID for the canvas object. %oid will be replaced with the id of the original object width: -1, // -1 uses the original image's width height: -1, // -1 uses the original image's width replace: false, // boolean to decide whether the original should be removed from the DOM corner_color: 0,0,0,0 // this means TRANSPARENT ... R,G,B,alpha 0-255 each }).

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.