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.
>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Web Toolkit" group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-web-toolkit/-/B-3KftJTjKkJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

Reply via email to