say something

CSS Border Styles

Whenever I get into the CSS of my sites I tend to stick with what I am used to because it makes development easier and I already know what the outcome is going to be (yeah that seems like common sense). This always seems to be the case with CSS border styles. Basically I stick with either solid or dotted simply because those are the two that stick out in my mind. Dotted comes out as dashed in IE so I am sure many of the IE users on my sites are not that impressed with that style, but I love it and we all know what a solid border looks like.

However, when playing with the design of this site yesterday morning I thought I would give another style a try to see what happens and I like the effect that it has on the site. I went with double simply because I wanted to. There is no “getting into the mind of the non-designer” insight here. Nope. I liked it, so I used it.

In any case, after the redesign (if you call it that) I was reading Cameron Moll’s site and his most recent entry Zaadz and the Evanescent Design Crew and found that Cameron used the double borders for his templates and it came out even sweeter than mine did (example).

If you need a refresher as to what the border style properties are in CSS here is a rundown:

  • none (sweet)
  • hidden (mostly for table stuff)
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

I’m not saying that you are better off using these instead of graphical borders, but it’s always good to have some alternatives in mind. Granted using some of those will give your site that swanky 1998 look, but maybe that is what you are aiming for.

Related reading:

  • No related posts.

Published by Scrivs on April 13, 2005 in CSS, Design • Did you like it? Subscribe! Or Submit it to Blogosphere News!

15 people says things!

  1. You know what they say. Oh, I’m flattered ;-)

    By Mike P. on April 13, 2005 2:34 pm

  2. Just as kind of a side note:

    IE 5.5/6 Win, as you stated, renders dotted as dashed, but only at 1px (or equivalent) width. Anything larger and it is actually a dotted line. The dots however (this is visible at 3px width or wider) are rounded where is Gecko-based/Opera-Win render square dots.

    IE 5.0 Win appears to render dashed and dotted as solid borders.

    By Jason G on April 13, 2005 2:36 pm

  3. Mike P, I have no idea what you are talking about.

    Jason, good points indeed and you have to wonder if Microsoft can even find the time to fix this for IE 7. I know there isn’t supposed to be any CSS engine improvements, but how hard of a fix could this be?

    By Scrivs on April 13, 2005 4:49 pm

  4. While fiddling around with this, I put together a test page if anyone wants to check ‘em out:

    http://www.fortymedia.com/special/bordertest/

    By James Archer on April 13, 2005 6:03 pm

  5. James, that is funny - I wrote a similar test page at work today when I read this, I just didn’t have anywhere to post it.

    Scrivs, I know MS hasn’t come out and stated they are going to make improvements - we have heard rumblings from the IE team on their blog - but ultimately its not up to the programmers its up to management. Anyway - its too early tell is all I am saying.

    By Jason G on April 13, 2005 6:30 pm

  6. Speaking of CSS and IE, looks like the rightCol of your new design is getting bumped below leftCol on individual entry pages.

    By Jeff Werner on April 13, 2005 7:54 pm

  7. Jason, yeah I know it’s up to management and I am not blaming the programmer’s at all. I am just hoping that Microsoft at least recognizes what us developers have to go through.

    Jeff, hopefully it’s fixed. I need to whip out the laptop to check it out.

    By Scrivs on April 13, 2005 9:05 pm

  8. So is the double line the new drop shadow?

    By Cameron Moll on April 13, 2005 11:59 pm

  9. Well it wasn’t till you just said it.

    By Scrivs on April 14, 2005 12:03 am

  10. Oh, way to go, Cameron. Now the double line is the new drop shadow.

    Gosh!

    By James Archer on April 14, 2005 1:34 am

  11. Hey James, you might want to try your border samples with a color other than black. With black, Safari fails to demonstrate the fact that the outset/inset/ridge/etc automatically produce 3D shading.

    By Cameron Moll on April 14, 2005 8:14 am

  12. So does this mean I am on the cutting edge with my website? Ha… right… just about all I have is the double line. (damn World of Warcraft!)

    By Jason G on April 14, 2005 12:54 pm

  13. They look sweet, bit light on this laptop screen but very sweet.

    By Tom on April 14, 2005 4:02 pm

  14. This article could not of come at a better time for me. I was trying to figure out a simple way to style my comments section that would fit with the rest of the design for my CSS Reboot (the current site is a version I should of never let out the door).

    Here’s a small snippet of what I came up with. Thanks Scrivs.

    Screencap

    By Alex Cabrera on April 16, 2005 1:27 am

  15. Double borders are hott. I am so, like, totally going to try using them.

    Love the test page, that was also hott.

    Man I’m glad I found this site, there’s other designer geeks like me out there! I feel so at home! *swoon*

    By Linds on April 18, 2005 11:59 pm

  16. Subscribe to comments via RSS!