1

I am wondering whats the best way to programmatically make rounded corners for images. This can be either using PHP or javascript. An algorithm will also do for the same and I can code it with Image::Magick or GD.

Thank you for your time.

Alec Smart
  • 94,115
  • 39
  • 120
  • 184
  • Duplicate: http://stackoverflow.com/questions/7089/what-is-the-best-way-to-create-rounded-corners-using-css http://stackoverflow.com/questions/823218/how-to-create-rounded-corners-using-css-or-javascript – Sasha Chedygov Jun 29 '09 at 08:11
  • Not exactly sure about the question, because it sounds so simple. What about drawing 4 circles http://us3.php.net/manual/en/function.imagickdraw-circle.php and 2 rectangles? http://us3.php.net/manual/en/function.imagickdraw-rectangle.php – merkuro Jun 29 '09 at 08:12
  • Ups, there is even a function that draws rounded ractangles in imagemagick: http://us3.php.net/manual/en/function.imagickdraw-roundrectangle.php – merkuro Jun 29 '09 at 08:14

7 Answers7

2

Use border-radius.

It is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.

For the best possible browser support, you should prefix with -webkit- and -moz-:

.round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 12px; 

  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px; 
}

If you need a JavaScript solution for older browsers check out jQuery Corner.

Paolo Moretti
  • 54,162
  • 23
  • 101
  • 92
1

Well, it depends what exactly you need. Do you want the corners to be transparent, or filled in some color? Which image format?

Here is some help for making rounded corners: http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=8401

Check it out, and if it does not help, update your question with the specific problem. Then we can probably help :-):

sleske
  • 81,358
  • 34
  • 189
  • 227
1

use JavaScript to programatically get round corners

OR

you can use mozilla and safaris browser extensions to get round corners using CSS but it will work only in Mozilla and Safari

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Rony
  • 9,331
  • 2
  • 22
  • 22
  • 1
    That automatically make it a nonviable solution, seeing that 90+% users are still using the buggy crap that is IE – futureelite7 Jun 29 '09 at 08:18
  • Make that 65.80% [http://en.wikipedia.org/wiki/Usage_share_of_web_browsers#Present_to_1999] (or, in any case, something around that number). Also, IE8, hopefully starting to gain users, seems to be less loaded with problems. – Tiberiu Ana Jun 29 '09 at 08:24
  • This Comment is to : futureelite. Dont contractdict yourself. If 90+% of people are using it, how come it could be buggy crap! I know IE has some defects but it is really getting better. – Shiva Jun 29 '09 at 21:04
1

I'd use curvy corners or nifty cube

Chris Klepeis
  • 9,783
  • 16
  • 83
  • 149
  • Curvy corners FTW! :D Nifty corners can't always round in IE. I have tried it in the Drupal's primary menu but it doesn't work in IE. – marknt15 Aug 10 '09 at 03:54
1

You can use the above mention tags with CSS, and for IE, use DDRoundies with some jquery code to make it work in IE. It is what I had to do to get it working. Good example of this is http://swiftmailer.org/ site. they make use of what I mentioned.

Aduljr
  • 214
  • 1
  • 4
1

Here are links for two PHP based solutions:

  1. Apply rounded corners to images is a PHP script that embeds rounded corner on the image itself
  2. PHP rounded corner generator script generates four corners that you can place over your image using CSS positioning -- or you can use them in your CSS/HTML layouts that require boxes with round corner.
Salman A
  • 262,204
  • 82
  • 430
  • 521
  • thanks. solution 1 was exactly what i needed: a way to generate rounded images that were just images afterwards with no tricky css or javascript. – Steve Nov 15 '09 at 07:46
0

Another one is the Thumbnailer class.

Mike Doe
  • 16,349
  • 11
  • 65
  • 88
user644602
  • 44
  • 2