Simple Rounded image (Facebook style)

[litewarez]

Just a tip to show you how to get rounded images like facebook 50x50 profile pictures

In your css document add the following selector:

img .round{
    border-radius: 5px;
}

Then for every image you wish to have rounded just add the class "round" to the image or image holder like so

    <img src="#image_location" class="round" />

This will produce:



Note: this only works with certain browsers but if the browser is not compatible it will just show the normal image!

litewarez Reviewed by litewarez on 10th Dec 2009. Simple Rounded image (Facebook style) Just a tip to show you how to get rounded images like facebook 50x50 profile pictures In your css document add the following selector: img .round{ border-radius: 5px; } Rating: 5

[snowmanrene]

Cool, never knew this.....Thanks

[Maz]

This is for CSS 3 isn't it? not on all browsers yet.

another tip, use the Rounded Ellipse Tool on Photoshop :$

[SJshah]

^ yh Maz, he stated that lol
thanks litewarez might come in useful.

[litewarez]

no problem doods, this you can use to corner div:elements aswell if you wish, not just images

[yais]

I think only Firefox and Safari 3 support this at the moment. Not worth using if you are serious about it as most people use other browsers. Opt in for JS or some other method until more browsers support it.

[litewarez]

Yes Yais but its one of them things that you can add and it will only work on certian browser but wont change anything for the broswers that dont support it, its a minor GUI modification and for them with the browsers that support it you might aswell add it.. IMO

[DeLeTeD]

still neat even though it isnt cross browser. good job anyways

[BlaZe]

I knew this lol only Firefox 3 & Safari (I guess) supports this.

If I'm correct, then you can do rounded borders with something called -khtml ?
(Really, I had just read this somewhere, sorry if I'm wrong)

[shadow.prx]

I found this somewhere else but its still a very useful post cant wait till all browsers support css 3 im going to use it and just put a firefox logo at the bottom like most sites do thanks litewarez keep these posts coming