This blog is no longer updated and is kept for archival reasons only. Please visit timothylive.net for the latest blog.

Timothy Kim::Blog - my life in words, verses and rhymes
twitter archive

Stamp/quilt like border using only CSS

Sorry, no boring introduction. Here’s an example:


hello!

Idea is simple, just using really thick dashed border to create that stamp like feel.

First the HTML:

  1. <div id="groove"><div id="spacer"><div id="content">
  2.       <h3>Hello!</h3>
  3. </div></div></div>

Yes, that’s triple divs without any white space between them. That’s to accommodate IE’s weird behaviors.

Now for the CSS

  1. #groove {
  2.   border: 5px dashed #FFAA00;
  3.   background-color: #FFFFFF;
  4.   padding: 0px;
  5.   width: 100px;
  6. }
  7.  
  8. #spacer {
  9.   padding: 3px;
  10.   background-color: #FFAA00;
  11. }
  12.  
  13. #content {
  14.   background-color: #FFAA00;
  15.   border: 2px dotted #FFFFFF;
  16.   padding: 3px;
  17.   height: 100px;
  18. }

The width value must be set to the outer most div and height value should be attributed to the inner most div.

The background-color for the #groove is to match the document background-color.

You may chose to get rid of the spacer, if you don’t want that white stitch within the box. Then of course, get rid of the border attribute from the content div.

It was tested in IE6/7, Firefox, Safari, and Opera. Only annoying thing is that to make this work in IE, you have make sure that there are no white spaces between nested divs.

Hope this helped!

Tags: , , , , ,

eungyu said,

February 19, 2008 @ 7:56 pm

totally remarkable.
http://digg.com/programming/Create_a_Stamp_Like_Border_with_CSS

slink said,

February 22, 2008 @ 5:42 am

It’s a nice post about this can be even done with CSS but for daily usage, and for semantics, it’s a bad idea to put a lot extra elements that have nothing to do with the content. For a real world job, it makes sense to achieve this approach using a background image with CSS.

Timothy Kim said,

February 22, 2008 @ 8:03 am

Yeah, I totally agree. Separating content and presentation should be done as much as you can. But if you ever used something like <div id=”wrapper”>, to make sure you can do a background image or set a specific width limit for inner elements, then you are as guilty as this posting.

As for the current state of HTML/CSS it’s pretty much impossible to completely separate content and presentation. Every site that you visit will have some hack to compensate for this issue.

Besides, if you use background image then you don’t have the flexibility over having the content inside the border change in size.

Thanks for the comment though! ^^;;

ms said,

February 22, 2008 @ 10:42 am

these experiments are great, keep at it. But it doesn’t look like a stamp. however it would be a really nice coupon frame for a printer friendly product sales page. God I can’t wait for SVG to merge more with these other web languages so we can draw all kinds of stuff inline without worry about this kind of annoyance.

bob said,

May 8, 2008 @ 5:04 am

ddlKlE hi nice site thanks http://peace.com