cssgwtrounded-cornersgwt-widgets

StackLayoutPanel Shows white ends at the rounded corners

I'm using GWT's StackLayoutPanel and trying to round the corners of its headers by applying border-radius attribute in the following CSS rule:

.mm-StackPanelHeader {
  padding-left: 7px;
  font-weight: bold;
  font-size: 1.4em;
  width: 200px;
  border-radius: 5px 5px 0px 0px;
  background: #d3def6;
  border: 0.5px solid #bbbbdd;
}

When collapsing the header items, the borders don't cover over each other completely, showing ugly white cornered ends.

How to fix this?

Here's the output's snapshot, for a reference.

Solution

  • Well, StackLayoutPanel was a definitely a newer version than StackPanel.

    But I used the latter in this case because there was no other way, and it worked like a charm!

    Thanks to all!