How to Remove border-radius on

2.0K Asked by EmmaLewis in Salesforce , Asked on Aug 5, 2021

Is it possible to remove border-radius on ? Just attaching a css class with border-radius: 0; does not help?

Using SLDS's input component documentation, you can easily create your custom input box for lightning border:

Input Label

versus using a lightning:input component, which in the end, renders to:

lightning:input

Upside of using SLDS custom component: granular control over styling access to DOM (not in lightning namespace) can use custom attributes Upside of using lightning:component includes SLDS styling many build in functionalities Downside of trying to customize a built in component (such as lightning input). Custom CSS may break if changes are made to the component in future releases. Hope this helps you make a choice between applying custom CSS rules to your lightning:input component vs using SLDS with HTML.

Your Answer

Answer (1)

Ranjana

To remove the border-radius from an element using CSS, you can set the border-radius property to 0. Here's how you can do it:

Inline CSS: Directly within the HTML element.

Internal CSS: Within a

Parent Categories