So, I wish to have the first and last data label of a group to have (respectively) their top left and bottom right borders rounded; for horizontal and smart group, the first and last data label of them should have their top left and right border rounded.
In-between data labels of these groups, or ones that do not belong to any group are not formatted.
A visual sample to help figure it out better:
This is the code I used:
.pi-group .pi-data-label:first-child { border-top-left-radius: 9px; }
.pi-group .pi-data-label:last-child { border-bottom-left-radius: 9px; }
.pi-horizontal-group .pi-data-label:first-child, .pi-smart-group .pi-smart-data-label:first-child { border-top-left-radius: 9px; }
.pi-horizontal-group .pi-data-label:last-child, .pi-smart-group .pi-smart-data-label:last-child { border-top-right-radius: 9px; }
Not sure if I missed anything, but only the first-child case worked, and the last-child case is a disaster.
Also, the width of a data row is not reached 'til the end of the row, but has some weird block on the right prevent it from fully displayed. Do you know how to fix that?
The link to the page applied this CSS and the CSS.
Thank you so much for your help.