Image borders with rounded corners

You can add the line anywhere in style.css, but it’s best to try and group things together – all the ID’s and Classes for the Header, for example, should be near the top.

First off, you have ‘content’ declared as an ‘ID’ (#content) rahter than a ‘Class’ (.content) – The difference is that Classes can be used as much as you want on a page, where as the ID can only be used once. So in this instance you would only have the first image that uses the ID contnet.

Secondly, check that you have the code correct in your source for where the images are to be displayed. I have no idea how you have the site set up, but it should be something like this, probably in ‘index.php’ –

<div class="content">
    <img src="<?php echo $img_src; ?> />
</div>

Finally, what browser are you using? IE does not support rounded borders on objects, so it will ignore the final statement in the ‘.content img {}’ declaration, giving you only a solid off-white border.

My browsers are Firefox & Safari.

The images are posted in the pages. Like this page. I want the square image to get a rounded grey border of 1 px. I tried also in the html code in the page but so far no result.

my index.php. look like this:

<?php
get_header();

 if (have_posts())
 {
    while (have_posts())
    {
      art_post();
    }
    art_page_navi();
 } else {
    art_not_found_msg();
 }

get_footer();

I tried with .content but still not working.

I was reading the tutorial on web designer wall. but this looks very complicate to me.

I think it get’s overruled somewhere, but I tried the default theme (twentyten) and with that I also can’t get it to work

I assume we are talking about the images on the right of the screen?

In your source change this –
<img class="alignright size-full.....

To this –
<img class="alignright rounded size-full.....

and put this at the bottom of your style.css, getting rid of the original CSS you posted if it is still in there –
img.rounded {border: 1px solid #444; margin: 0 10px 5px 0; -moz-border-radius: 7px;}

You may have to fiddle with the margin sizes, but that’s something you can tweek after it (hopefully!) is working. FYI, margin, padding and border when declared with 4 sizes go in this order – top, right, bottom, left.

Great thanks ! it works but I have to manually round of all the images, the tutorial on web design wall does this automatically I believe.

doesn’t work for safari though, also the corners aren’t rendered so well in firefox 3.6.9

-moz-border-radius refers only to Firefox I believe, not sure if any other browsers can do it – worth a search there.

As for quality – I to have noticed that with the new Firefox, poor form I say!

And as for the image – not sure how this could be achieved without manipulationg the image first, I may have a play with that if I get chance – will post results if I get any, so make sure you have tick the notify by email box below.

https://www.the-art-of-web.com/css/border-radius/

it’s supported by most browsers…just has to be coded for each (safari, opera, firefox, etc)

Great tutorial, thanks for posting, I’m sure many will find it useful.