Gradients and Rounded Borders in RAP

We try hard to enable a “sexy” look and feel for Rich Ajax Platform (RAP) applications. However, without rounded borders and gradients you can hardly create a website that look modern. Take this dialog as an example:

It looks so much better with rounded borders on Shell, Control and with these Button gradients:

The latter screenshot has been taken from the current RAP development stream. These features were challenging to implement but we eventually came up with a solution. The interesting part is that it’s not image based. Instead of creating a bunch of images (one for every corner and side), all you have to do is define your border radius in the CSS style sheet.

How does it work?

We are using vector graphics (SVG/VML) in the browser. This works with all browsers supported by RAP (FF2+, IE6+, Safari 3.1+, etc.) without any add-ons. Check it out on our examples demo.

And how does the CSS look like? For gradients we followed the CSS syntax implemented by Webkit-based browsers as Safari and Chrome. Besides a start color and an end color, you can also define any number of intermediate steps. We only support vertical linear gradients in the first version, but this will change. By the way, we proposed to use the same syntax for styling in e4.

  background-image: gradient(
    linear, left top, left bottom,
    from( #ffffff ),
    color-stop( 48%, #f0f0f0 ),
    color-stop( 52%, #e0e0e0 ),
    to( #cccccc )
  );

For rounded borders we followed the CSS 3 syntax. You can set rounded borders using the new border-radius property (even a different radius for every corner is possible).

  border: 2px solid #005092;
  border-radius: 6px;

Both features are available in the RAP CVS and will be included in the 1.3 M1 release shipped in August.

Enjoy!