Member Avatar for 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!

<style>
.about {
font-family:"BankGothic Md BT";
font-size:12px;
border-right:1px solid #FB9709;
border-left:1px solid #FB9709;
border-bottom:1px solid #FB9709;
border-top: 1px solid #FB9709 url('tab.gif');
text-align:left;
word-wrap : sWrap;
width:275px;
background: #fff;
}
</style>
Edited by happygeek because: fixed formatting
  • 4 Contributors
  • 9 Replies
  • 378 Views
  • 5 Years Discussion Span
  • Latest Post Latest Post by Member #578978

Dani AI

Generated

Quick summary and what's actually happening: the CSS border shorthand only accepts width, style and color — it does not take an image URL — so a top border cannot be made into an image by stuffing a URL into border-top. was right to push toward using an image as a background or decorative layer instead. (developer.mozilla.org)

If a decorative image for the full frame is acceptable, use the CSS3 border-image feature: it lets an image draw the element’s border (but it replaces the regular border, so keep a fallback border-style/border-width). Example (modern browsers):

/* CSS3 border-image approach */
.about {
  border: 6px solid #FB9709;           /* fallback and required for border-image to render */
  border-image-source: url("tab-top.png");
  border-image-slice: 6;               /* slice according to your image */
  border-image-repeat: round;
  border-image-width: 6px;
}

This is broadly supported in current browsers, but check compatibility and provide fallbacks for older engines. (developer.mozilla.org)

If only the top edge needs a decorative strip while keeping normal borders all around, use a positioned pseudo-element so the strip sits above the box without altering other sides:

/* top-only decorative strip using a pseudo-element */
.about {
  position: relative;
  border: 1px solid #FB9709;
  background: #fff;
}

.about::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;            /* tweak so it lines up with the border */
  height: 12px;         /* image strip height */
  background-image: url("tab-strip.png");
  background-position: top left;
  background-repeat: repeat;
  pointer-events: none;
}

Use ::before when you want a top-only decorative image or need a reliable fallback; backgrounds can also be used on wrappers for very old browsers. ()

Troubleshooting tips: make sure border-style is not none and border-width is nonzero when using border-image; adjust border-image-slice to capture the correct part of your artwork; and remember border-image typically affects all sides — use pseudo-elements or an outer wrapper if you want a single-side decoration. ’s wrapper/compose idea is still practical for older browsers, and ’s note that border-image solves complex stripes is correct — just test across targets. (developer.mozilla.org)

Recommended Answers

All 9 Replies

Member Avatar for 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;

Member Avatar for zenfulcreations

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 :)

Member Avatar for zenfulcreations

oops, double post.
sorry.

Member Avatar for DaveSW

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

Member Avatar for zenfulcreations

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.

Member Avatar for 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?

Member Avatar for cmills83

Alright, thanks!

Member Avatar for zenfulcreations

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 !

Member Avatar for Member #578978

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.