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 --
This is just like BiComponent's setOpacity(). oValue should be a number between 0 and 1 where 1 is totally opaque and 0 invisible.
"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)
"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();
var rc = new MyRoundedCorners("top");
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.