Web Page Designer Border

Discussion in 'HTML & Website Design' started by Nettizen, Sep 29, 2013.

0
  1. #1
    Hi,

    How can I have a designer border (using an image) instead of a simple 'solid color' option. I would want a small image to be repeated multiple times on the corners. (Just like small image on my page background covers the whole page).
     
    Nettizen, Sep 29, 2013 IP
  2. competent123

    competent123 Notable Member

    Messages:
    1,752
    Likes Received:
    71
    Best Answers:
    6
    Trophy Points:
    255
    #2
    Code is NOT supported by IE.

    div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
    Code (markup):
    Usage : 

    <html>
<head>
<style>
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}

#round
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

#stretch
{
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer does not support the border-image property.</p>
<p>The border-image property specifies an image to be used as a border.</p>

<div id="round">Here, the image is tiled (repeated) to fill the area.</div>
<br>
<div id="stretch">Here, the image is stretched to fill the area.</div>

</body>
</html>
    Code (markup):
     
    competent123, Sep 30, 2013 IP
  3. Nettizen

    Nettizen Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Thanks. Will just try it. But the borders of other's website are working on IE, so why won't this?
     
    Nettizen, Sep 30, 2013 IP
  4. competent123

    competent123 Notable Member

    Messages:
    1,752
    Likes Received:
    71
    Best Answers:
    6
    Trophy Points:
    255
    #4
    i am talking about this particular way only, this particular way is not supported by IE, maybe someone else will help you out with something that will be supported in IE.
     
    competent123, Sep 30, 2013 IP
  5. Nettizen

    Nettizen Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    Ok. Thanks.

    (1.) Now do I have to use url of my image eg. "http...image.jpg" in place of "(border.png)" ?

    (2.) Where do I have to paste it? After "<html> <head>" and before the "<title>" of the page ? It didn't work when I tried... any other changes required ?
     
    Nettizen, Sep 30, 2013 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Can we see the image in question? Generally speaking what you are asking for is best handled with a LOT of DIV, which is why what you are asking for has gone the way of the Dodo due to code complexity.

    There's a method I used to use which I call "eight corners under one roof" -- puts all your corner/edge images into one file. I explain it here:

    http://www.cutcodedown.com/tutorials/eightCorners/page1.html

    Though it really hinges on what the images are and how you want them placed -- your question was a bit vague on that count.
     
    deathshadow, Sep 30, 2013 IP