0

I have the below modal pop-up built using LWC that has curvy edges but I need the edges to be squared.

Actual : enter image description here

Expected :

enter image description here

Here's the modal pop-up piece of HTML code for the existing one : I want to achieve this without making major changes in the below code

enter image description here

Improve this question
2
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.
    – Community Bot
    Commented Dec 26, 2023 at 9:56
  • 4
    Contrary to the first comment, I find your question very clear. But please don't present source code via a screenshot. This makes it much more time consuming to experiment with your input; it's also bad for search engines.
    – Felix van Hove
    Commented Dec 26, 2023 at 10:39

1 Answer 1

Reset to default
2

The border radius is coming from slds-modal__header and slds-modal__footer. You can either add a class and specify styles with more specificity or the lightning design system has styling hooks for slds-modal. You can override the hook to eliminate those border radius.

add this to your .css file of the lwc:

.slds-modal__header, .slds-modal__footer{
   --slds-c-modal-radius-border: 0;
}
Improve this answer

You must log in to answer this question.

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