Custom Image Borders with CSS?

Discussion in 'Scripts, 3rd Party Apps, and Programming' started by Zdroyd, Jan 7, 2009.

  1. Zdroyd

    Zdroyd New Member

    Messages:
    548
    Likes Received:
    0
    Trophy Points:
    0
    Is it possible to use CSS to make a custom boarder that uses an image file for the line?

    And can this also be used to make rounded corners?

    Thank you ahead of time...
     
  2. freecrm

    freecrm New Member

    Messages:
    629
    Likes Received:
    0
    Trophy Points:
    0
    In direct answer to your question... yep.

    The way image borders are created is to position images (in css) relatively within <div>'s, not customising the border itself.

    However, it gets a bit tricky as each div can only load one image, so you have to set a div within a div within a div etc. (unless someone can tell me otherwise)

    And yes, this is the way I do rounded corners. I use a block with a plain colour background and then create rounded .jpg corners in that background colour (with white on the outside)
     
  3. Zdroyd

    Zdroyd New Member

    Messages:
    548
    Likes Received:
    0
    Trophy Points:
    0
    ... So can anyone tell me how to do it?

    It will be very helpful for me to know...

    (Note that I do not have to have rounded corners, I really just need ANY way to make a image boarder for tables.)
     
  4. sourfacedcyclop

    sourfacedcyclop New Member

    Messages:
    221
    Likes Received:
    0
    Trophy Points:
    0
    You could load the image you want inside of another, larger image with rounded corners, this would give the illusion of rounded corners and custom borders. It might look something like this.
    Code:
    div#table1 table tr td {
    background:url('imageinbghere') no-repeat;
    width:whatever;
    height:whatever;
    }
    div#table1 table tr td img {
    position:relative;
    width:whatever;
    height:whatever;
    }
    
     
    Last edited: Jan 7, 2009
  5. Zdroyd

    Zdroyd New Member

    Messages:
    548
    Likes Received:
    0
    Trophy Points:
    0
    So everyone is telling me that it is not possible to simply have the borders drawn with an image?

    Something like:
    <table top_border = "/borderfile.jpg" bottom_border = "/border2file.jpg" />
     
    Last edited: Jan 8, 2009
  6. alz4445

    alz4445 New Member

    Messages:
    124
    Likes Received:
    0
    Trophy Points:
    0
    No. You can't do it like that.
    Code:
    <div class="left"></div>
    <div class="top"></div>
    <div class="mid">content</div>
    <div class="right"></div>
    <div class="bot"></div>
    
    And in CSS set all of them to float left, and set the background images as the images you want around the outside, in bot, left, right and top. Mid for the middle etc.

    With tables, just add another 2 rows, and 2 columns. In the top left corner, add the rounded edge, the same for all of the other corners, and you get the picture for the top/bottom and left/right.
     
    Last edited: Jan 8, 2009
  7. Zdroyd

    Zdroyd New Member

    Messages:
    548
    Likes Received:
    0
    Trophy Points:
    0
    But it will not custom strech when I have the tables size be a %.

    I suppose that is alright, I will just change my idea to make it so I do not have to have borders. *cry*

    Thank you all for the help...
     

Share This Page