website

So I thought I would share a simple trick that creates a really clean effect. It’s what I call a double border. I don’t like adding borders onto the actual images I put on websites, so I’ve experimented with using css to create the borders. What I’ve found is that css rocks at doing this!

Basically you put a <div> tag around the image you want to add a border to. And add css to the div, not the image. That way we can still control the image, but we have much more variation with what we can do with borders.

Here is what the <div> and <img> html would look like.

<div class="border-cool-out">
<img src="/post-content/border/me.png" alt="Cool Border" »»
height="100" width="75" />
</div>

And then the really simple css for the double border. basically all you need to do is give the class the width of the image, and however much border you want. Than add a background-color and padding. That will create the extra border to give it a double border effect.

<style>
.border-cool-out{
  border:1px solid black;
  background-color:#efefef;
  width:75px;
  padding:2px;
}
</style>

I hope you enjoyed this really easy, but cool way to create stylish and great looking borders. Here is another example.

I thought it might be cool to show an interesting example of how this could be used. Other than as a double border. Enjoy!