Which of the two methods conforms to W3C standards? Do they both behave as expected across browsers?
border: none;
border: 0;
+2
A:
I use:
border: 0;
From 8.5.4 in CSS 2.1:
'border'
Value: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
So either of your methods look fine.
cletus
2010-05-27 16:26:54
Why do you set both width and style? What's the point?
Oli
2010-05-27 16:34:41
Zero dotted looks the same as zero solid
Christopher Altman
2010-05-27 17:54:07
+10
A:
Either is valid. Your choice but I would favour border:0 as it's shorter. If you have a lot of traffic, you'll notice the difference!
You seem to be worried about the specs. Well here they are.
'border'
Value: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: see individual properties
The value clearly states that you can use any combination of width/style/colour. In this case you only need to set one. 0 sets the width, none the style.
Oli
2010-05-27 16:27:13
+8
A:
They are equivalent in effect, pointing to different shortcuts:
border: 0;
//short for..
border-width: 0;
And the other..
border: none;
//short for...
border-style: none;
Both work, just pick one and go with it :)
Nick Craver
2010-05-27 16:28:50
+2
A:
As others have said both are valid and will do the trick. I'm not 100% convinced that they are identical though. If you have some style cascading going on then they could in theory produce different results since they are effectively overriding different values.
For example. If you set "border: none;" and then later on have two different styles that override the border width and style then one will do something and the other will not.
In the following example on both IE and firefox the first two test divs come out with no border. The second two however are different with the first div in the second block being plain and the second div in the second block having a medium width dashed border.
So though they are both valid you may need to keep an eye on your styles if they do much cascading and such like I think.
<html>
<head>
<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
.nonetest div {border: none;}
div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}
</style>
</head>
<body>
<div class="zerotest">
<div class="setwidth">
"Border: 0" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: 0" and "border-style: dashed"
</div>
</div>
<div class="nonetest">
<div class="setwidth">
"Border: none" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: none" and "border-style: dashed"
</div>
</div>
</body>
</html>
Chris
2010-06-01 09:33:44