Border on Three Sides

An Easy Way?

[jk3210]

I'm trying to set a table border at 1px on three sides with no border on the top. I know I can do it by setting BORDER-LEFT...BORDER-RIGHT, etc, but I thought I once saw it done all in one shot, something similar to:

.tableBorder {border: solid; 0px; 1px; 1px; 1px; #d2e4f1;}

...but this isn't working. Anyone know?

[BjarneDM]

You've got way too many ;'s. Remove all but the last one.

[jk3210]

Thanks for the reply.

>>Remove all but the last one<<

Did it. Now it's giving a normal 1px border on all sides.

Maybe it just can't be done this way. Would've been nice, though.

[createErrorMsg]

Here it is in two...

.tableBorder {
border: 1px solid #d2e4f1;
border-top:0;
}

... which is less than three! :)

[jk3210]

Works!

Thanks

[Saltminer]

You can also use three values, 'top left-right bottom'.

.tableBorder {
border: 0 1px 1px solid #d2e4f1;
}

That cuts it down to one!

Jimmy

[SuzyUK]

Saltminer, I'm afraid that won't work :(

test it and see..

div {
border: 0 1px 1px solid #000;
}

<div>some text</div>

why it won't work is because border is a shorthand property which can only be used to set ALL FOUR borders of an element the same.. it will only accept three values
border: [1 x width] [1 x style] [1 x color];

yes you can target each individual property like you describe, but only on a different type of border shorthand

border-width: 0 1px 1px
border-style: solid dotted inset dashed;
border-color: #000;

each of those three will accept up to four values like you describe, depending which/how many of the borders you want to target.

there are three different ways to use border shorthand, and it's usually a choice (CSS and it's choices heh!) as to what fits best :)

Suzy

[Saltminer]

Oops, you're right. I don't know what I was thinking, it works for margin and padding, but not border.
Sorry