Blog
Dotted image border
Here's a quick one. I am sure that you wanted to use different styles of image borders like dotted border style. The trouble is that css dotted border doesn't render well in all browsers.
So, I am presenting a little workaround to achieve various border effects.
What you need is a little pattern background image. And then:
- Place an image inside a container. (I prefer <p>)
- Define a background image for a container
- Give the container 1px padding.
It’s that simple!
Take a look at the example and some variations.
Comments
Veracon on May 25, 2006. wrote:
But what if there's transparency in the image? I'd give the image itself a (in this case) white background, to prevent seeing the pattern through the image.Bojan on May 25, 2006. wrote:
Hey, that's really cool! Never thought of that. Thnx :)Kris Gosser on May 25, 2006. wrote:
Simple, yet quite smart. I really dig the method!Ron on May 25, 2006. wrote:
Brilliant! Great work, thanks for sharing!Konrad [piXelRider] Sarnowski on May 25, 2006. wrote:
Good one! :) But it would be better to use pattern image with white&transparent pixels, and changing border color with the outer's container background color :) Thanks for the idea ;)Alen on May 26, 2006. wrote:
Thanks for comments, guys!This is merely a starting point. There are many things you can do with it. You can add an anchor or a span inside the paragraph and apply the same concept to it. That way you can solve whatever transparency issue you might have.
Possibilities are limitless. :)
Si on May 26, 2006. wrote:
Good thinking Mr. Some times the simplest methods are the best ones! I suppose you could use a similar pixel-graphic method could be applied to semi-transparent backgrounds.Avasilcai Daniel on May 27, 2006. wrote:
good idee, but just try a pattern like a 9x9px cross, or 7x7px cross, or 5x5px cross, the effect will be more realistic, like the css dotted border.Marko Mihelcic on May 27, 2006. wrote:
Interesting , this might be usefull! TnxFredrik Wärnsberg on May 27, 2006. wrote:
Isnt that pretty obvious? :P Nice anyway.dreamr on May 27, 2006. wrote:
Am I the only one who remembers this technique from the last millennium? Only difference is back then it wasn't done with nested elements but nested tables: one carrying the background, the other carrying cellpadding. Still, nice effort.Alen on May 28, 2006. wrote:
Well, I haven't seen this technique around (to tell you the truth I haven't searched for it either) and I thought I would publish it on MY site for people who don’t think that this is old news or too obvious.I am not bragging about this across forums or community sites. Since I believe in sharing, I thought I’d share this one as well.
Eric Meyer on May 28, 2006. wrote:
Another way to manage it is to set the background on the image itself and set padding for the image. That removes the need for a container element. So something like this: img.bordered { padding:1px; background:url(dot.gif) repeat; } (There's probably a better class name than "bordered", but I can't think of one right now.) Padding on images works in IE6 in standards mode, but not quirks mode (and thus not in earlier versions of IE/Win).dreamr on May 28, 2006. wrote:
Don't get me wrong, I didn't mean any offense. And, honestly, I've not seen it either on any CSS sites yet, even if I already used this technique from time to time. I thought this was common. And obviously I was wrong. Back in the time before half-decent CSS support, this was the /only/ way to create borders around anything. It didn't take long before we found out about striped and all kinds of funky patterns we could use instead of a solid background color. This was back in 1996, 1997, tho. Not everyone has been around back then.Alen on May 29, 2006. wrote:
I appreciate your note, Eric. I have developed a habit of placing images inside a container. Somehow it seems more elegant to me.Alen on May 29, 2006. wrote:
dreamr wrote:This was back in 1996, 1997, tho. Not everyone has been around back then.That would include me also :)
This is something that came to me during the design/dev process. Before publishing this article I have browsed through first 3 or 4 pages on Google and since I didn't find anything similar I thought it wouldn't be a bad idea to share it.
Matera on May 31, 2006. wrote:
Funny, I never thought of using a dotted border for an image before. Ugly, I thought. *Shrug* I don't see much of a problem with the display... I'm not using Ick Ecchh LOL. It looks best with a 1px padding though. The image background borders can break up badly because of the browser pixel-counting thing.Andrew on Jun 4, 2006. wrote:
I'm with Eric on this one. I have been using the img padding technique to ge very simple borders (or what look like frames) on some of my latest designs. Putting an image within a container seems more of a hassle though, since you could control it all through one tag, why add another one? Just my two. Keep up the good work though.Alen on Jun 4, 2006. wrote:
I am also with Eric (as a matter of fact, I have used img tag only on several projects), but there are some effects that you can't pull off without a container. Take a look at examples 2 to 4 on my example page.Leave a comment
Note: All comments have to be authorized before publishing. ...more info
Featured Project
Css Globe is a web standards related, member driven community site. Besides posting news, members can create portfolios, write reviews etc. More features will come soon.
Blog Categories
Most Recent Blog Entry
Tablecloth released
Today I have released Tablecloth. It is a lightweight, easy to use, unobtrusive way to add style and behavior to your html table elements.
Steve on May 25, 2006. wrote:
Sweet, simple and effective. You are a genius !!