8 replies [Last post]
Alex Taylor
Offline
newbie
Vancouver, BC Canada
Last seen: 16 years 41 weeks ago
Vancouver, BC Canada
Timezone: GMT-8
Joined: 2004-04-13
Posts: 7
Points: 0

'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

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 41 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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 Wink

hr
{
height: 1px;
color: #000;
background: #000;
border: none;
border-bottom: 1px solid #555;
}

The next sentence is true. The previous sentence is false. Discuss...

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 41 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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.

The next sentence is true. The previous sentence is false. Discuss...

Alex Taylor
Offline
newbie
Vancouver, BC Canada
Last seen: 16 years 41 weeks ago
Vancouver, BC Canada
Timezone: GMT-8
Joined: 2004-04-13
Posts: 7
Points: 0

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!

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 41 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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?

The next sentence is true. The previous sentence is false. Discuss...

Alex Taylor
Offline
newbie
Vancouver, BC Canada
Last seen: 16 years 41 weeks ago
Vancouver, BC Canada
Timezone: GMT-8
Joined: 2004-04-13
Posts: 7
Points: 0

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..

Alex Taylor
Offline
newbie
Vancouver, BC Canada
Last seen: 16 years 41 weeks ago
Vancouver, BC Canada
Timezone: GMT-8
Joined: 2004-04-13
Posts: 7
Points: 0

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!

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 41 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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.

The next sentence is true. The previous sentence is false. Discuss...

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 37 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

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

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS