First of all - first post - new member - hi everyone!

 

Second:

I was wondering how people went about giving their images round corners, without actually editing images. For example, Facebook have incorporated it recently by using JavaScript to overlay their users avatars with a PNG that only has rounded corners and no visible content.

 

I wanted to know, is there a way to do this with just HTML and CSS and regardless of how it's done, could someone point me in the right direction please?

 

Kindest regards,

Tom.

Try looking on here http://sampsonvideos.com and click on video tutorials and choose CSS. On this page you will see a tutorial on rounded corners.

 

- Neil

Make 4 corners, top, left, bottom, right.

 

Make 4 divs inside the div you want with corners and fix the divs to the corners using something like

 

display: absolute or relative (i think absolute but cant remember)

top: 0;

left: 0;

 

something like that, or you could just make one image providing it's small enough in file size and attach it to a list item or whatever, assuming it's for a navigation

 

li
{
background-image: url(round.png);
background-repeat: no-repeat;
background-position: top left;
width: width of image;
height: height of image....
}

Edited February 4, 201016 yr by Sam G
added [code] tags

Thanks fellas, but I had already contemplated those ideas. Perhaps I should have said. I don't feel it's practical to do this for a site like mine as there will be 10 instances per page and that would be 40 divs to do 10 jobs. I will make page loading slower, no?

 

Any other thoughts?

Send me your picture you want to do and i'll show you what to do/ do it for you. If not, my advice is to do the rounded bit on photoshop (or any other photoediting software) but behind it make it a transparent layer, then save it as PNG.

I think Nifty Corners works on images.

Thanks again folks. Nifty corners looks just the trick.

But that only works with js enabled, a.g.r.c's method (which is the way i do it) works without. Although i've never had the need to use it lots on a page, but i don't think it's really that much extra mark up considering the size of the js file.

 

Although as long as the js degrades (which it does) it's not too bad, and at least it's automatic

Sure, understood Bocaj - but I tend to think that most non-JS visitors will be either bots (who have no artistic leanings), folks using screen readers (who probably aren't too bothered either), or people using a "noscript" plugin, who will already be aware that using it will affect their experience in various ways.

 

Using JS (Nifty or any other one) is also much, much quicker, especially if you have loads of images like the OP has, and it degrades gracefully (i.e. no JS, no corners, but nothing else affected). Time is money

I'm thinking more sort of phones and PSP, they still have shoddy js support, maybe with the exception of the iphone and the g1.

 

Anywhere above like 8+ images, the manual corners method starts to blag, i'd moan about the size of the js file, but we're in an age where you can buy 100mb broadband (in like 2 months, from virgin), file size isn't an issue.

 

PSP just fails on-line, it really does. Although i hacked mine to get opera mini, but even that's shoddy. There are still alot of phones with poor support, however in most cases it isn't that much of an issue, as long as it degrades well, i don't care. And i thing the user is probably used to it, so you can go crazy

 

I'm not a purist.