Can you use an image as a border option in CSS?

**ProMaster** · 08-10-2009, 06:39 PM

I am trying to place a border around the body of a page. I would use 4 different images, each representing a different drop shadow. I have not read anywhere online how to do this. Anyone know how to do it?

Here is the code...

body {
margin-left: auto;
margin-right: auto;
margin-top:15px;
width: 779px;
background-color: #41555F;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#fff;
border-right: IMAGE HERE
border-left: IMAGE HERE
border-top: IMAGE HERE
border-bottom: IMAGE HERE
}

**Snot** · 08-10-2009, 07:02 PM

I don't know if this is what you are trying to do or if there is a better way to do it but is this what your looking for.

Code:

#top {
    background: url(image.gif) repeat-x;
    margin-top: 0px;
}
#right {
    background: url(image.gif) repeat-y;
    margin-right: 0px;
}
#left {
     background: url(image.gif) repeat-y;
     margin-left: 0px;
 }
#bottom {
     background: url(image.gif) repeat-x;
     margin-bottom: 0px;
 }

**ProMaster** · 08-10-2009, 07:03 PM

Thanks Sir

I shall try it and report here soon

**Snot** · 08-10-2009, 07:48 PM

It should work if your border image is repeatable.

If it's not you should sill be able to use them just take the repeat x/y off each one.