Jeremy's Samples

home > Rounded borders

Three methods displayed below. Rounded boarders arne't too tough unless you want to have them on floating, draggable elements. IE does not render .png 24 correctly for full transparency so care needs to be taken for making the rounded corners look good over any color scheme.

A common practice is to use one of the first two methods and on initial load of a page call a Javascript function that goes through and addes to the DOM to make certain class named DIV's rounded.

1. Fully expandable in all directions. Use a series of nexted divs with background images to create a rounded box.

here's some content
and more content

<div style="width: 200px; height: 100px;">
    <div style="background: url('fullexpand/t.gif')  0    0    repeat-x;background-color: #FFFFCC;">
        <div style="background: url('fullexpand/b.gif')  0    100% repeat-x;">
            <div style="background: url('fullexpand/l.gif')  0    0    repeat-y;">
                <div style="background: url('fullexpand/r.gif')  100% 0    repeat-y;">
                    <div style="background: url('fullexpand/bl.gif') 0    100% no-repeat;">
                        <div style="background: url('fullexpand/br.gif') 100% 100% no-repeat;">
                            <div style="background: url('fullexpand/tl.gif') 0    0    no-repeat;">
                                <div style="background: url('fullexpand/tr.gif') 100% 0    no-repeat;">
                                    <div style="padding: 15px;">
                                        here's some content
and more content
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2. Fully expandable in all directions. This uses a series of bold tags all with adjusted margins and a border to create rounded boxes without images.

here's some content
and more content

<div style="width: 200px; height: 100px;">
    <b class="ttop">
        <b class="tb1"></b>
        <b class="tb2"></b>
        <b class="tb3"></b>
        <b class="tb4"></b>
    </b>
    <div class="tooltip">
        here's some content<br />and more content
    </div>
    <b class="tbottom">
        <b class="tb4b"></b>
        <b class="tb3b"></b>
        <b class="tb2b"></b>
        <b class="tb1b"></b>
    </b>
</div>

.tb1, .tb2, .tb3, .tb4 { display:block; overflow: hidden; }
.tb1, .tb2, .tb3 {height:1px;}
.tb2, .tb3, .tb4 {
  background: #FFFFCC;
  border-left: 1px solid #999999;
  border-right: 1px solid #FFF;
}
.tb1 { margin: 0 5px; background: #999999; }
.tb2 { margin: 0 3px; border-width: 0 2px; }
.tb3 { margin: 0 2px;}
.tb4 { height: 2px; margin: 0 1px; }

.inner {display:block; background:#FFFFCC; border-right: 1px solid #999999; border-left: 1px solid #FFFFFF; padding: 5px;}

.ttop, .tbottom {display:block; background: transparent; font-size: 1px; }
.tb1, .tb2, .tb3, .tb4, .tb1b, .tb2b, .tb3b, .tb4b {display:block; overflow:hidden;}
.tb1, .tb2, .tb3, .tb1b, .tb2b, .tb3b {height:1px;}
.tb2 { background: #FFFFCC; border-left: 1px solid #FFFFFF; border-right: 1px solid #EEEEEE; }
.tb3 { background: #FFFFCC; border-left: 1px solid #FFFFFF; border-right: 1px solid #DDDDDD; }
.tb4  {background: #FFFFCC; border-left: 1px solid #FFFFFF; border-right: 1px solid #AAAAAA; }
.tb4b { background: #FFFFCC; border-left: 1px solid #EEEEEE; border-right: 1px solid #999999; }
.tb3b { background: #FFFFCC; border-left: 1px solid #DDDDDD; border-right: 1px solid #999999; }
.tb2b { background: #FFFFCC; border-left: 1px solid #AAAAAA; border-right: 1px solid #999999; }

.tb1 { margin: 0 5px; background: #FFFFFF; }
.tb2, .tb2b { margin: 0 3px; border-width: 0 2px; }
.tb3, .tb3b { margin: 0 2px;}
.tb4, .tb4b { height: 2px; margin: 0 1px; }
.tb1b { margin: 0 5px; background: #999999; }

3. Expandable in one direction top<->bottom or left<->right. Uses 3 divs and a background image for each one.

here's some content
and more content

<div class="box_top"></div>
<div class="box_middle">>
    <div style="padding: 10px;">here's some content<br />and more content</div>
</div>
<div class="box_bottom"></div>


.box_top {
    height: 8px;
    width: 266px;
    background-image: url('onewayexpand/top.png');
    background-position: bottom left;
    background-repeat: no-repeat;
}

.box_middle {
    width: 266px;
    background-image: url('onewayexpand/middle.png');
    background-position: top left;
    background-repeat: repeat-y;
}

.box_bottom {
    height: 8px;
    width: 266px;
    background-image: url('onewayexpand/bottom.png');
    background-position: top left;
    background-repeat: no-repeat;
}