image border and regular border not working together?

0
votes

I have a div, with an image border repeated along y-axis from top.

background:url(../shadow_left.png) repeat-y top left;
border:1px solid black;

the problem is, that my client DEMANDS a 1px border also, along with the background border image.

If I simply add the 1px solid black border, it will appear AFTER the background-image border.

Since the background-border is a shadow, I need the 1px regular border just before it, and not outside it. Currently it is appearing outside, which makes it ugly.

Any ideas?

Thanks

2
htmlimagecssborder
add the 1px border to the image file instead (on the right side) - musefan
I cant, he wants to be able to simply change its color from time to time. - user1214823
It's really hard to understand what you're asking for without some illustration. - Pointy
why is it hard? the css border appears outside the image-border. I want it on the inside, ie alongside the DIV instead. - user1214823
Your use of the words "before" and "after" don't make any sense to me. Also, the term "image border" is confusing; it's not really a border, it's a background. Maybe it's only a few pixels wide, but it's still a background. (A "border image" is a whole different thing.) - Pointy

2 Answers

3
votes

Couple of options you could try.

Firstly, you could just add a 1px border to the actual image file, on the right side.

Secondly, you could add an inner DIV to your current DIV. The inner DIV will have the content and the 1px border and then the outer div has the background image. you will need to make the inner DIV have a left-margin equal to the same width as the image you are using for the shadow.

Hope that makes sense

Here is a sample

0
votes

You could try using the css3 property of box-shadow:

  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 0px 0px 4px 0px #ffffff; /* FF3.5 - 3.6 */
          box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */

Taken from CSS3 Please!

Or you should add the border to the shadow image.