Revision history [back]

You can change the right border for the second and third ToggleButton within the ToggleButtonGroup by using the nth-child selector in CSS. Here's an example code that demonstrates this:

HTML:

<div class="toggle-buttons">
  <label><input type="radio" name="color" value="red"> Red</label>
  <label><input type="radio" name="color" value="green"> Green</label>
  <label><input type="radio" name="color" value="blue"> Blue</label>
</div>

CSS:

.toggle-buttons label {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #ccc;
}

.toggle-buttons label:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.toggle-buttons label:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.toggle-buttons label:nth-child(2),
.toggle-buttons label:nth-child(3) {
  border-right: none;
}

In this example, we have three ToggleButton elements wrapped in a container with the class toggle-buttons. We apply some basic styles to the label elements, such as display, padding, and border.

We use the :first-child selector to add rounded corners to the left side of the first label element, and the :last-child selector to add rounded corners to the right side of the last label element.

Finally, we use the :nth-child selector to target the second and third label elements and remove the right border using the border-right: none property. This gives the appearance of the second and third ToggleButtons being grouped together, where the first and last have rounded borders.

Note that this is just an example, and you may need to adjust the selectors and styles to fit your specific use case.