April 13, 2005

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:

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.

Posted by Scrivs at April 13, 2005 01:43 PM

Comments

#1 | Mike P. (http://www.fiftyfoureleven.com)

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

#2 | Jason G (http://www.jgleman.com/)

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.

#3 | Scrivs (http://9rules.com/)

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?

#4 | James Archer (http://www.fortymedia.com)

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

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

#5 | Jason G (http://www.jgleman.com)

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.

#6 | Jeff Werner (http://jeffwerner.ca)

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

#7 | Scrivs (http://9rules.com/)

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.

#8 | Cameron Moll (http://www.cameronmoll.com)

So is the double line the new drop shadow?

#9 | Scrivs (http://9rules.com/)

Well it wasn't till you just said it.

#10 | James Archer (http://www.fortymedia.com)

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

Gosh!

#11 | Cameron Moll (http://www.cameronmoll.com)

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.

#12 | Jason G (http://www.jgleman.com/)

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!)

#13 | Tom (http://www.thedeplorableword.net)

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

#14 | Alex Cabrera (http://www.makesubclip.com)

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

#15 | Linds (http://www.dizzylimits.com)

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*

Post a comment


Remember Me?

(you may use HTML tags for style)

Email this entry to a friend








Email information is not stored by us and is only used to send out the email.

« Couloir's Resizing, Fading Slideshow Demo | Looking For A Designer(s) »