Border-top-image no worky

[cmills83]

Here is what I have...everything works except the entire top border does not. I have tried it this way and also border-top-image:...Does anyone have any ideas!? thanks!

[DaveSW]

you can't use images as borders.
use a background image set to tile across the top instead.
background: url('tab.gif') 0 0 repeat-x;

[LoriL1212]

As Dave said, borders can't be images.

So, open the image that you want up there in your graphics program and at the top add the "1px #FB9709" line to the image.

Then use this:

.about {
width: 275px;
background: #FFF url('tab.gif') no-repeat top;
font: "BankGothic Md BT", Arial, sans-serif;
border: 1px solid #FB9709;
border-top: none;
text-align:left;
word-wrap : sWrap;
}

That should do it :)

[LoriL1212]

oops, double post.
sorry.

[DaveSW]

I'm lost... why not leave the border off the image and just let it go all the way round?

[LoriL1212]

I'm lost... why not leave the border off the image and just let it go all the way round?

Not sure who you were addressing, and really not sure what you are asking either, LOL.

[DaveSW]

Yeah I was sort of replying to you. When you said:
open the image that you want up there in your graphics program and at the top add the "1px #FB9709" line to the image.
I took it to mean putting the border directly onto the image, and then the css blanks off the css top border.

I just wondered why go to those lengths when all you have to do is leave the image intact and put the top border across it using CSS...

Maybe not?

[cmills83]

Alright, thanks!

[LoriL1212]

I just wondered why go to those lengths when all you have to do is leave the image intact and put the top border across it using CSS...

Maybe not?

Well, depends on the image... if the image that needs a top border is not the same width as the container box (ie less width), then the border would extend beyond the left and right of the image :)

Hard to say without seeing the image ;)

Was worth a try to post !

[AshtonHogan]

Well, let's say you wanted a border to be 300px width, 1px height, black, solid. then in the same horizontal axis, on the same border, 100px width, 1px height, white, solid - then again: 100px width, 1px height, black, solid.

Now you have a border that "changes" - an image would be easiest instead of writing a huge piece of code. I can see how border-image would come in handy.