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:
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.
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.