Re: Rounded borders in panel

[Ashton Thomas]

UiBinder: (Also shows background gradients)

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>

.wrap {

padding: 10px;

}

.roundedWidget {

text-align: center;

margin: 0px 0px 0px 0px;

color: #FFFFFF;

cursor: pointer;

border: 1px solid #4D4D4D;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

-webkit-box-shadow: #666 1px 2px 2px;

-moz-box-shadow: #666 1px 2px 2px;

box-shadow: #666 1px 2px 2px;

background: #616161;

background: literal("-webkit-gradient(linear, 0 0, 0 bottom, from(#616161), to(#303030))"

);

background: literal("-webkit-linear-gradient(#616161, #303030)");

background: literal("-moz-linear-gradient(#616161, #303030)");

background: literal("-ms-linear-gradient(#616161, #303030)");

background: literal("-o-linear-gradient(#616161, #303030)");

background: literal("linear-gradient(#616161, #303030)");

padding-bottom: 4px;

}

.roundedWidget:hover {

color: #333333;

background: #EBEBEB;

background: literal("-webkit-gradient(linear, 0 0, 0 bottom, from(#EBEBEB), to(#C2C2C2))"

);

background: literal("-webkit-linear-gradient(#EBEBEB, #C2C2C2)");

background: literal("-moz-linear-gradient(#EBEBEB, #C2C2C2)");

background: literal("-ms-linear-gradient(#EBEBEB, #C2C2C2)");

background: literal("-o-linear-gradient(#EBEBEB, #C2C2C2)");

background: literal("linear-gradient(#EBEBEB, #C2C2C2)");

}

</ui:style>

<g:HTMLPanel ui:field="wrap" styleName="{style.wrap}">

<g:HTMLPanel styleName="{style.roundedWidget}" ui:field="text">

More HTML or Widgets Here

</g:HTMLPanel>

</g:HTMLPanel>

</ui:UiBinder>

Non UiBinder:

You can probably start with:

fuWidgetBar.getElement().getStyle().setProperty("borderRadius", "30px");

On Wednesday, October 24, 2012 1:47:23 AM UTC-4, vairavan Murugappan wrote:

Is there a easy widget or panel with rounded borders in gwt ??

It seems decoratorpanel can be used to do it but its not very clear how to do it..

Thanks in advance.