Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question multi-pixel image border?

    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:






  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,297
    Thanks
    10
    Thanked 282 Times in 281 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks!

    Thanks for your input dave!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •