PDA

View Full Version : multi-pixel image border?



thesergie
Feb 28th, 2012, 12:50 AM
Hi guys!

I'm trying to use css3 to imitate some image borders i designed (below). There's a way to do it using the border-image property ( http://www.css3.info/preview/border-image/ ) but i'm trying to figure out how to create it without using images.

Do you guys have any ideas?
Thanks for your help!

-------------

Here are the borders i want to create using css:
http://dl.dropbox.com/u/1053706/border-image/shot_00975.png
http://dl.dropbox.com/u/1053706/border-image/shot_00976.png
http://dl.dropbox.com/u/1053706/border-image/shot_00977.png
http://dl.dropbox.com/u/1053706/border-image/shot_00978.png
http://dl.dropbox.com/u/1053706/border-image/shot_00979.png
http://dl.dropbox.com/u/1053706/border-image/shot_00980.png

tracknut
Feb 28th, 2012, 02:02 AM
The code would be a bit ugly, but you could wrap multiple divs around your image, each with a different border treatment. For example in your first image, there is a square border 1px, dark gray, then that's wrapped with a medium gray border with round corners, which is then wrapped with a third border in light gray, 1px wide with rounded corners.

Looks to me like all your examples could be done this way, without images.

Of course I'm no CSS3 expert, perhaps there's something really trick out there that would make this simpler.

Dave

thesergie
Feb 29th, 2012, 11:27 PM
Thanks for your input dave!