PDA

View Full Version : Box Borders


Crumpy1
02-02-2012, 02:24 PM
Hi All,

I have designed a small border and saved as appropiate in a GIF format. I would like to insert this image as a border around my #container div so all of the webpage is bordered using this design.

Is this possible? if so can anybody provide me with instructions or a link on how to do this.

Many Thanks

DWcourse
02-02-2012, 02:51 PM
You can do it with CSS3 but browsers support is spotty.

http://www.css3.info/preview/border-image/

gentleone
02-02-2012, 03:26 PM
Although DWCourse is right about the lack of browser support due to IE (even IE9 doesn't support it), I'd still like to encourage you to use it. Websites don't have to look the same in all browsers (http://dowebsitesneedtolookexactlythesameineverybrowser.c om/) thus for the browsers that don't support border-image you declare a solid border colour as fallback solution with the little help of Modernizr (http://www.modernizr.com/).

If you need help with it just let me know.

Ricky55
02-02-2012, 06:20 PM
I agree with you Gentle in general but have you used CSS3 borders?

They are poor IMO, probably the worst thing I've used in CSS3, really confusing implementaion and browser support is really poor.

Its not just IE, even modern browsers have their discrepancies, I think this is one thing that will either get dropped or significantly changed.

Whats this border look like? Sometimes it can be possible to create them using several instances of the box shadow property.

gentleone
02-02-2012, 11:11 PM
I agree with you Gentle in general but have you used CSS3 borders?
Yes I did, but not in a client site myself yet :)

They are poor IMO, probably the worst thing I've used in CSS3, really confusing implementaion and browser support is really poor.
I did not have a hard time when I was experimenting with it. Okay, my border images were not that funky or so, but there was no border-image generator yet to make the process esasier and now there is (http://border-image.com).

Its not just IE, even modern browsers have their discrepancies, I think this is one thing that will either get dropped or significantly changed.
You might be right... except for Chrome the other browsers are leaving behind already for a long time.
http://caniuse.com/#search=border-image
That's probably also the reason why there is no javascript polyfill developed for it.

Sometimes it can be possible to create them using several instances of the box shadow property.
Yes, you can fake nice borders with box-shadows, but the really crazy/funky borders what you can do with border-images not.

Crumpy1
02-03-2012, 08:26 AM
Thank you for all your comments, and your instruction and links on how to apply them. The border i wish to apply is a small 10px wide border similar to the front of the black and gold chanel ribbon http://img0.etsystatic.com/il_570xN.211546304.jpg. I am in 2 minds whether or not to use the border as i am building a new e-commerce site for up market clients and do not want it to be glitchy. I am definetly going to test it to see if it will work ok, i will use modernizer as recommended by gentleone to put the back-up borders in place incase the client browser does not support the CSS3 features, but overall do people recommend this as a styling method or to stay away from this for now?

Thanks

Ricky55
02-03-2012, 11:04 AM
Give it a try Crumpy, that is a relatively simple border the one I was trying to do was more like a frame. See what you think to CSS3 image borders. I found them a bit clumsy like I said. You're milage may be different.

Glitchy is the wrong word to describe any lack of css3 support. Its not glitchy it just simply won't be seen by older browsers but it doesn't cause any problems, you can just provide a regular border for older browsers.

Crumpy1
02-08-2012, 01:48 PM
Thank you guys, i have tried it and it works fine.

Thanks for all your help.