Editing my css and want no border on a certain element so change what
was the shorthand border declaration to
border:none;
which seems to work.
No wonder. It's correct. You can also remove the border by not setting
border properties at all, provided that you don't have a CSS rule
somewhere that sets a border on the element. Theoretically, browser
default style sheets might have such a rule (I don't think any of them
has, except for images inside links), so setting border: none explicitly
could be seen as extra safe.
But looking in my manual of css it seems to say I ought to have it
border-style: none;
Does it, really?
But is that the same thing,
Not at all, though they have partly the same effect, and depending on
circumstances, the difference need not have a visible impact.
the first option being the shorthand
declaration with all the values missing except border-style?
It's a shorthand notation, yes, but the values are missing in one sense
only: the values are not written in the rule. The rule still sets all
border properties, namely to initial values, unless explicitly
specified. See
http://www.w3.org/TR/CSS2/box.html#border-shorthand-properties
Specifically, border: none is by definition equivalent to the following:
border-width: medium;
border-style: none;
border-color: currentColor;
where currentColor is to be replaced by the color of the content of the
element (its color property value).
For most practical purposes, border: none and border-style: none have
the same effect, as the width and color of a nonexistent border do no
matter. But in complicated situations, the difference may matter.
Consider this:
td { border: solid red; }
td.foo { border: none; }
td.bar { border-style: dashed; }
What happens to <td class="foo bar">? It gets a dashed border of the
color of the element content, black by default. The reason is that
border: none sets the border color, too. If you had used border-style:
none instead, then the border would be dashed red.