Incomplete Borders

On my webpage, I have a main div whose borders don’t wrap completely around the edge. It can be a pretty neat effect, so long as it doesn’t look out of place on your website, but used right, it’s awesome.

How does it work? Well, there’s three places you could find out. They could copy my source, they could check w3. Or I can tell you. Right now.

border-left, border-right, border-top, border-bottom are the four basic commands to control each side, and you can leave one or more out, depending on how many sides you want your div to have. To actually define them, you can add -style, -color, and -size to the end of each of those commands, to control how it looks, what color it is, and how big its like. Like such:

#genericdiv {
border-top-size: 5px;
border-bottom-size: 2px; }

This will create a line at the top and bottom of your div, one 5 pixels wide, and one 2 pixels wide. But they’ll look kind of boring. So lets add a style and color.

#genericdiv {
border-top-size: 5px;
border-top-style: double;
border-top-color: #0000ff;
border-bottom-size: 2px;
border-bottom-style: solid;
border-bottom-color: #0000ff;}

Now, you have a blue, 2px line at the bottom, and two separated lines at the top of your div, with a 1px space in between them. Together, the lines and the space would total a width of 5 pixels.

The only downside to this technique is that you cannot use the standard border shortcut, which normally looks like this: (border: 2px solid #0000ff;). It’s a disappointment, but I still personally like the effect.

~Matthew Hartnett

~ by negativenine on February 3, 2010.

One Response to “Incomplete Borders”

  1. I liked this post because it was chronological and had step by step instructions. I appreciated the background information before the post and when you told us that you had success with this method.
    I would have liked to see a visual of the example, either a screen shot or link to your site would have been helpful. I also would have liked to see the em conversions to pixels just because again, I had a difficult time visualizing the size of the border.

    Thanks for including the code as well, this makes the trick extremely user friendly!

Comments are closed.

%d bloggers like this: