Hello everybody I was wondering if anybody could help me. I want to round the lightning-button in a LWC. I found something like this 'border-radius-circle' but it does not work. Could anybody put an example? Is this possible? Thanks

1 Answer 1


Due to the Shadow DOM you cannot change the style of standard component unless the CSS property is setted via custom properties.

Looking at the buttons blueprint in Styling Hooks section you'll find the one for the border-radius: --slds-c-button-radius-border.
So if you want to change the default value you could give your button a CSS class, i.e. circle, then set the desider value to the custom property --slds-c-button-radius-border:


:host .circle {
    --slds-c-button-radius-border: 50%;


<lightning-button variant="brand-outline" label="Button" class="circle"></lightning-button>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .