Last post Jan 19, 2006 11:33 AM by jan_olsmar
Jan 18, 2006 02:03 PM|Conwy|LINK
I want my site's pages to have a border with some shadow. I don't want to use image as a background to accomplish it (i think it has slower load time). How can I add a image (border.jpg) as a border in css? Maybe something like this? but it doesn't work...
Or maybe it is not a good idea and I shoud use image as an background?
border-right: url (border.jpg);
border-top: url (border-top.jpg);
border-left: url (border.jpg);
border-bottom: url (border-bottom.jpg);
Thanks in advance!
Jan 19, 2006 08:35 AM|flanakin|LINK
First off, I'm about 90% sure you can't use an image with the
border CSS elements. What does the border that you're trying to create look like? If it's simply a few pixels of a diff color, obviously you can just set the border color appropriately. I'm assuming you have a gradient of some sort.
If that's the case then you have two options, as far as I can tell: (1) use a table or divs to come up with the desired look using the
background-image CSS element; or, (2) if your users are all IE users, you can use their proprietary
filter CSS element. The things you have to worry about with the latter approach is that (a) if you use it too much, it can slow down user interaction (namely scrolling); (b) I've seen
it tweak printing in odd ways when applied to form elements; and, (c) obviously, the styles won't be present in non-IE browsers.
Hope this helps!
Jan 19, 2006 11:33 AM|jan_olsmar|LINK
You can try something like this
BORDER-RIGHT: #828282 1px solid; LEFT: -0.2em; FLOAT: center; MARGIN: auto; BORDER-LEFT: #B6B6B6 1px solid; WIDTH: 770px; BORDER-BOTTOM: #828282 1px solid; POSITION: relative; TOP: -0.2em; BACKGROUND-COLOR: #fff; TEXT-ALIGN: left