Tue, 2004-04-13 19:08
've been trying several different combinations of borders to try to recreate the effect in this mockup I made:
http://www.alextaylor.org/images/etchedborder.gif
The borders are basically a line of one-pixel colour on top of another one of slightly lighter tone.
I thought this would be very simple with either grooved or ridged borders set at 2px, but I'm having quite the time controlling the two colours. More specifically, I don't think I CAN control the two colours.
The closest I've gotten is:
border-top: 2px ridge #111111;
Unfortunately, that's too light. I cannot get borders looking like the one in the screenshot. If anybody has any insight into this, it would be much appreciated!
-Alex
Tue, 2004-04-13 19:28
#1
are these borders possible with CSS?
You can use horizontal rules?
Since the css for a horizontal rule allows you to set the border separately to the actual height, you can use them. This is of course only useful if you want your borders horizontal 
hr
{
height: 1px;
color: #000;
background: #000;
border: none;
border-bottom: 1px solid #555;
}
Tue, 2004-04-13 19:32
#2
are these borders possible with CSS?
You could do a whole block element such as a div as well, with the outline and border declarations combined:
div
{
width: 200px;
height: 200px;
border: 1px solid #555;
outline: 1px solid #000;
}
Outline does not allow for a top, bottom, left or right specification though. I'm not entirely sure on the browser support for outline either.
Tue, 2004-04-13 21:10
#3
are these borders possible with CSS?
Thanks for the tips!
I just checked the CSS2 specs and outline seems to have sketchy browser support, but I'll definitely try it out.
The hr isn't a possibility for two reasons, the main one being that in addition to the ones in the screenshot I have two borders running vertically down the center column. I also would love to do it without too much extra markup. Anyways, thanks again for the quick response, I'll keep experimenting!
Tue, 2004-04-13 21:20
#4
are these borders possible with CSS?
The ridge border worked pretty well for me (in a few Mac browsers at least)... with the color: #555;
Do you have a URL we can see?
Tue, 2004-04-13 21:57
#5
are these borders possible with CSS?
Hmm, maybe I'll have to give that another try.
I'll have a page in a few days, right now the client wants to keep it confidential but I plan to make a dummy page to post for stress testing.
Here's what I get with #555 ridge (it's the light vertical line in the middle):
Still too light. I'm baffled at how CSS calculates the colours. I sampled that screenshot in Photoshop and the colour does not correspond! I wish there was a way to define both colours..
Tue, 2004-04-13 22:27
#6
are these borders possible with CSS?
Alrighty, I used co2's hr idea for the horizontal elements, and just a background image for the center vertical lines since it's a fixed layout. Not the perfect solution but it works!
Wed, 2004-04-14 08:18
#7
are these borders possible with CSS?
Nice to know you've found a compromise. Unfortunately, the colours for the borders (ridge etc.) will more than likely be calculated by the browser rather than the CSS. Each browser will have it's own settings.
Wed, 2004-04-14 12:22
#8
are these borders possible with CSS?
Actually for any of the ridge, groove, inset, outset border specification, the BROWSER calculates the color differentials to use from the base color you specify. CSS has nothing to say about the effect. Different browsers execute the two dimensional effects differently. Therefore, if you want to control the effect, you have to specify explicity the exact colors you want for each of the top,right,bottom and left. If you want to create a precise groove border, for example, you would require two nested divs with 1px borders, one with your chosen light color, and one with the dark. Anything else and you are at the mercy of the browser.
DE