Cross Browser Rounded Borders Using Sprites

I was reviewing techniques for rounded borders and came across this. It uses four background images for each of the corners; however, they're not using a sprite. So, we'll do it with a single sprite. Once we're done, we'll have something like this that works on all the major browsers ( IE6/IE7, Firefox, Safari and Opera ) --



First, we'll take the four corner GIF images that they have, make them transparent ( using a bitmap editor ) and then use a sprite generator to create our sprite as well as the supporting CSS. I like to use the one from Website Performance.

Next, we'll take the layered approach which means that we'll nest absolutely positioned elements in a relatively positioned container. So, the four corners, the two horizontal and vertical lines are absolutely positioned.

Here's the structure --

    <div class="b2">
     <div class="border-container">
       <div class="sprite-tl2"></div><div class="sprite-tr2"></div>
       <div class="horz-line top-line1"></div>
       <div class="horz-line top-line2"></div>
     </div>
     <div class="content">
       We're using sprites for rounded borders.  This implementation works in IE6/IE7, Firefox 2.0.x, Safari 3.1 and Opera 9.27. <a href="http://skypoetsworld.blogspot.com/">Read more.</a>
     </div>
     <div class="border-container">
       <div class="sprite-bl2"></div><div class="sprite-br2"></div>
       <div class="horz-line bottom-line1"></div>
       <div class="horz-line bottom-line2"></div>
     </div>
     <div class="vert-line left-line1"></div>
     <div class="vert-line left-line2"></div>
     <div class="vert-line right-line1"></div>
     <div class="vert-line right-line2"></div>
   </div>

and here's the CSS --

      .b2{width:20em;margin-bottom:5px;position:relative;}
     .border-container{position:relative;}
     .sprite-bl2{background: url(roundsSprite3.gif) 0 -30px no-repeat; position:absolute;width:11px;height:10px;top:0;left:0;}
     .sprite-br2{background: url(roundsSprite3.gif) 0 -70px no-repeat; position:absolute;width:11px;height:10px;top:0;right:0;}
     .sprite-tl2{background: url(roundsSprite3.gif) 0 -110px no-repeat; position:absolute;width:11px;height:10px;top:0;left:0;}
     .sprite-tr2{background: url(roundsSprite3.gif) 0 -150px no-repeat; position:absolute;width:11px;height:10px;top:0;right:0;}
     .content{padding:10px 10px;font-family:verdana;font-size:93%;}
     .horz-line{position:absolute;border-top:1px solid #EC9E3C;width:50%;}
     .top-line1{left:11px;top:0;}
     .top-line2{right:11px;top:0;}
     .bottom-line1{left:9px;top:9px;}
     .bottom-line2{right:10px;top:9px;}
     .vert-line{position:absolute;border-left:1px solid #EC9E3C;height:50%;_height:2em;}
     .left-line1{top:10px;}
     .left-line2{bottom:0;}
     .right-line1{top:10px;right:0;}
     .right-line2{bottom:0;right:0;}

It's all pretty self-explanatory. You can view the sample and the source here. Feel free to use and improve it!
Have fun!

Bindows Nifty Round Corners :: No Images!

In March of 2005, Alessandro Fulciniti wrote a piece on using rounded corners without the use of images -- "Nifty Corners". The idea is simple -- by stacking lines of different lengths on top of one another you form a rounded corner.

Alessandro used a combination of block elements and margins to achieve this. We can do the same by using the basic Bindows building block -- BiComponent -- manipulating its width and then using setStyleProperty() to reduce its margins.

The result is the component, MyRoundedCorners, a BiComponent that allows you to create rounded "top" or "bottom" corner pieces --



You can use the top and the bottom piece to "sandwich" the main body of another BiComponent and create something like this Meebo-like Yahoo! login --



Because MyRoundedCorners is a BiComponent, you can listen for events and add it to other BiComponents. So, you can create a custom dialog, drag it around and even resize it as found here.

Using MyRoundedCorners is simple. To create rounded corners for the top, do this --

var topPiece = new MyRoundedCorners("top");

or with no arguments --

var topPiece = new MyRoundedCorners();

To create rounded corners for the bottom --

var bottomPiece = new MyRoundedCorners("bottom");

There are a few "public" methods ( these are the ones that are meant for you to use; of course, you could iterate through the properties and discover methods that you're not supposed to use! ) that allow you to set properties for the corners.

Most of the methods mimic the behavior found in "out of the box" Bindows components and are self explanatory --

• setWidth(w)


• setBackgroundColor(colorInHexOrRgb)


• setOpacity(oValue)

This is just like BiComponent's setOpacity(). oValue should be a number between 0 and 1 where 1 is totally opaque and 0 invisible.

• setCSSBorder(borderValue)

"borderValue" is equivalent to the values for the CSS border property like --

border: 1px solid #000;

where "borderValue" is "1px solid #000".

• setBackgroundImage(url, repeat)

"url" is the URL value or the name of the background image that you want to use. It's the same value used in the CSS property "background-image".

"repeat" is the same as the CSS property "background-repeat". You can use values "repeat", "repeat-x", "repeat-y" or "no-repeat".

So, to create a rounded top border with a width of 400px with the background color of #9bd1fa, you'd do this --

var container = new BiComponent();
container.setSize(400, 20);
var rc = new MyRoundedCorners("top");
container.add(rc);
rc.setWidth(400);
rc.setBackgroundColor("#9bd1fa");
rc.setOpacity(1);
...
application.getWindow().add(container);

Note that the height of the rounded corners are always 5px. You can't ( and shouldn't ) change that. This makes the API even simpler because all you have to worry about is setting the width of MyRoundedCorners.

You can find the examples/test driver here. You can review the XML here and MyRoundedCorners here.

I built the component and the examples with Bindows 3.0, but it should work for other Bindows versions as well.

Have fun!