CODEWITHSUNDEEP
htmlcss
Ammar Hadzic
Ammar Hadzic

Reputation: 178

Making custom border html

I am trying to make resizable sidebar with custom border using .png. I have a sample of each side of border and corners, but I don't know how to make that my .png repeat horizontally on both sides and so vertically.

Upvotes: 0

Views: 5401

Answers (3)

Kesar Sisodiya
Kesar Sisodiya

Reputation: 1624

Easy way to create border by image, just upload your image on THIS WEBSITE and set value by given button:

Upvotes: 1

bookcasey
bookcasey

Reputation: 40511

CSS3 border-image

Upvotes: 3

ScottS
ScottS

Reputation: 72281

First, I am assuming that you want the border to be flexible.

For CSS3 (IE9 and other modern browsers) you can use multiple backgrounds (for example, see http://jsfiddle.net/RCHtK/ ). Put a class on a div (like fancyBorder) and something like this CSS:

.fancyBorder {
    padding: 15px; /* this should probably be set at least to the width of your border image */
    background:
        url(topleftimage.png) top left no-repeat,
        url(toprightimage.png) top right no-repeat,
        url(bottomleftimage.png) bottom left no-repeat,
        url(bottomrightimage.png) bottom right no-repeat,
        url(top.png) top left repeat-x,
        url(bottom.png) bottom left repeat-x,
        url(left.png) top left repeat-y,
        url(right.png) top right repeat-y;         
}

For earlier IE browsers see this example: http://jsfiddle.net/RCHtK/10/. This is tested in IE7 and 8 (should work in IE6 I believe). The code could be minimized with creative use of pseudo elements if you only wanted to support IE8. As you can see, a large number of non-semantic div elements are needed to do it. The relevant code is here:

HTML

<div class="fancyBorder">
<div class="fbInner">
    <div class="fbContent">
    Here is some sample text. <br />
    Here is some sample text. <br />
    Here is some sample text. <br />
    </div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="tl corner"></div>
    <div class="tr corner"></div>
    <div class="bl corner"></div>
    <div class="br corner"></div>
    </div>    
</div>

CSS

.fancyBorder {
    /* left side */
    background: url(leftimg.png) top left repeat-y;
}
.fbInner .fbContent {
    position: relative;
    z-index: 2;
}
.fbInner {
    padding: 15px; /* this should probably be set at least to the width of your border image */
    position: relative;
    /* right side */
    background:url(rightimage.png) top right repeat-y;
}

.fbInner div {
    position: absolute;
    z-index: 0;
}
.fbInner .top {
    top: 0;
    left: 0;
    height: 15px;
    width: 100%;
    background: url(topimage.png) top left repeat-x;
}
.fbInner .bottom {
    height: 15px;
    width: 100%;
    bottom: 0;
    left: 0;
    background: url(bottomimage.png) bottom left repeat-x;
}
.fbInner .corner {
    z-index: 1;
    width: 15px;
    height: 15px;
}

.fbInner .tl {
    top: 0;
    left: 0;
    background: url(topleftimage.png) top left no-repeat;
}
.fbInner .tr {
    top: 0;
    right: 0;
    background: url(toprightimage.png) top right no-repeat
}
.fbInner .bl {
    bottom: 0;
    left: 0;
    background: url(bottomleftimage.png) bottom left no-repeat;
}
.fbInner .br {
    bottom: 0;
    right: 0;
    background: url(bottomrightimage.png) bottom right no-repeat;
}

Upvotes: 4

Related Questions