PDA

View Full Version : CSS Border Properties help



lansing
Mar 17th, 2007, 07:25 AM
I have searched & tried several things to get this to work & can't seem to get it to work. I am needing to use the border properties in CSS so that I can have a different image for each of the 4 borders in a box.

I have read over this site & couldn't come up with anything that would work.http://www.w3schools.com/css/css_border.asp

This is what I have & need to use image instead of a actual border color.
.custom_new_products_box{

border-left-color:#FF0000;
border-left-style:solid;
border-left-width:medium;

border-right-color:#FF0000;
border-right-style:solid;
border-right-width:medium;

border-bottom-color:#FF0000;
border-bottom-style:solid;
border-bottom-width:medium;

}
I have tried placing url('images/infobox/left.gif') in color, style & width of each border & it will not display the image.

Xiong Chiamiov
Mar 17th, 2007, 05:52 PM
Well, see, people don't actually use borders usually (as far as images go). Usually, you set the background to be an image, and align it bottom and right (or whatever). To do what you want, I'm thinking you need to create some extra divs all nested together with no padding and give each one the border. Y'know, one has the right border, another the left, etc.

Arbitrator
Mar 17th, 2007, 06:28 PM
Yeah, what you want is the border-image (http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-image) property of the CSS3 Backgrounds and Borders Module (http://www.w3.org/TR/css3-background). So far as I know, no browser supports this property yet.

Currently, to get the effect, you’ll need to either (A) surround the content box will several other boxes and assign background images to those boxes or (B) nest several boxes around the content box, apply the borders as background images of those boxes, and position those images as necessary with the background-position property.