I am trying to add border color to lightning-input lwc componenet. First when i tried the below css

    <template for:each={test} for:item="f">
        <lightning-input  style="border: 3px solid red"
            value="test" key={f.Id} data-id={f.Id} variant="label-inline" label="test" title="test">

    <button class="slds-button slds-button_brand">Submit</button></div>

enter image description here

The issue here is i want the border to be exact on the input not around it. Please let me know how it is possible for lightning-input lwc

  • You cannot style the inner markup of lwc standard components, only way is either use css hooks or load exteral style sheet.
    – Damecek
    Sep 3, 2022 at 20:19

3 Answers 3


As per SLDS guideline, it's easier to add required attribute to lightning-input base component:

<lightning-input required="true"
    value="test" key={f.Id} data-id={f.Id} 
    variant="label-inline" label="test" title="test">

This adds asterisk sign (*) next to input denoting it's required:

enter image description here

When input is touched and not filled in, on leaving input; form marks the input as dirty and shows the red border:

enter image description here

<lightning-input class="customInput" type="text" label="Enter some text"></lightning-input>

we have to override CSS :

Create a CSS file and add in static resource

File Content :

.customInput .slds-input{
    border-color: red;

Import That static resource file in your component
import { loadStyle } from 'lightning/platformResourceLoader';

import CUSTOMCSS from '@salesforce/resourceUrl/{yourfileName}';

a) Define variable like : isCssLoaded = false;

Call it in reRenderCallback


if(this.isCssLoaded) return
this.isCssLoaded = true;
    console.log('error to load');

Its look like this enter image description here


You can use CSS styling hooks for that. For your specific requirement you can use the below one.

--slds-c-input-color-border : red

You can add a custom CSS class to your lightning-input tag and add the above styling hook to that class.

You must log in to answer this question.

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