CODEWITHSUNDEEP
htmlcss
David19801
David19801

Reputation: 11448

rounded corners on a thumbnail

Is it possible to make the corners of a thumbnail rounded using css?

EDIT - The html starting point is:

<img src='test.jpg' width='50' height='50' />

It has no css on it at the start and I be wanting to round the corners a little...

EDIT+NOTE: The moz-border method doesn't really round the corners of the image itself, which is what I was hoping for, instead it rounds the corners of a boarder square around the images. Looks ok...

Upvotes: 1

Views: 3100

Answers (5)

Clayton
Clayton

Reputation: 6271

To phrase this better, the following two lines will achieve the desired effect in Firefox, Chrome, and IE9.

-moz-border-radius: 5px;
border-radius: 5px;

More information can be found here: http://www.css3.info/preview/rounded-border/

To accomplish this in IE8, you will need to use javascript. This jquery plugin would do the trick: http://jquery.malsup.com/corner/

Upvotes: 1

John Hartsock
John Hartsock

Reputation: 86882

Yes using the nifty-corners technique. Nifty corners is an old way to produce rounded edges. It will function in all browsers (old and new browsers)

http://www.html.it/articoli/nifty/index.html

Upvotes: 0

Jimmy Sawczuk
Jimmy Sawczuk

Reputation: 13614

This code will round all four corners and it also supports Opera.

img { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

Clayton's solution only rounds the top two corners, which may or may not be what you're looking for.

Upvotes: 0

rockerest
rockerest

Reputation: 10508

To expand @Clayton's answer:

You can do it natively in any modern browser:

-moz-border-radius: 5px;
border-radius: 5px;

The vendor prefix -moz will likely disappear soon.

See this jsfiddle to see it in action. Notice, also, that the rounding is applied directly to the <img> element.

This works in all current versions of all 5 major browsers.

Upvotes: 4

Karl Andrew
Karl Andrew

Reputation: 1555

You can use border-radius. It doesn't work on <img> elements, but you could apply border-radius to a <div> with the image as the background-image.

Upvotes: 0

Related Questions