Image Borders with Rounded Corners

  • Resolved Joel

    (@jneuenhaus)


    18 years ago

    Due to my meager abilities I have some (hopefully simple) questions about automatically creating image borders for posts within my modified kubrick themed blog.

    The goal is to implement image borders with rounded corners for all posts on my WP site – well, at least all of the post that have images. The result will hopefully be close to what they have achieved on the Lifehacker.com site. Ideally this formatting of images would occur automatically – not having to repeat in each post.

    It appears there are a number of approaches to address this dilema. Other solutions I’ve seen had 3 seperate elements involved; html, css & actual images. I have a few questions on each one:

    When adding the css rules, should this be done in the styles.css file? Since this rule should only to apply as previously stated, is there additional coding that needs to be entered?

    Must the HTML go in each post or could it be placed in one of the templates (which one) to avoid repetition?

    As long as it’s properly referenced, placing the image in the wp_content/images/ should work fine? Given that the images frequently have non-uniform dimensions, would a simple square (with rounded corners) work successfully?

    If someone has any alternate ideas or resources that would be excellent. Sorry for the trivial questions, but any help provided would be greatly appreciated! Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • jamiew

    (@jamiew)

    18 years ago

    There’s a lot of questions in here, let me tackle one or two. First the simple part. To do what they do on lifehacker, you would edit your style.css file (in wp-content/themes/default) and add a line that looks something like this:

    #content img {border: 5px solid #ddd; margin: 0 10px 5px 0; -moz-border-radius: 7px;}

    What this will do is anytime there is an image in your post (the img tag) it will add a 5 pixel gray border, put some padding on the right and bottom, and then round the corners 7 pixels. That’s it, no html to add, no nothing else.

    That said, the rounded corners will only work in Firefox and other Mozilla browsers. IE has no support for such a thing. It’s possible to do, but it’s MUCH more complicated to do that the above. Google shows many hacks available: css rounded corners. BTW, I lifted the code for this on the site I’m working on right now straight from lifehacker.

    voxie

    (@voxie)

    17 years, 6 months ago

    Wow, thank you very much jamiew, I did that and the images rounded off just fine! brilliant 🙂

    vkaryl

    (@vkaryl)

    17 years, 6 months ago

    IE7 might have support for this now, don’t know for sure…. but that’s what those who use crap browsers get, ain’t?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image Borders with Rounded Corners’ is closed to new replies.