function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
anil bolisetty 11anil bolisetty 11 

Adding colour to border using slds-box

Hello,

I am using slds-box to create borders,but thay are always white in colour is there any way i can change the colour

<div class="slds-box"> <p>This is a regular-sized box.</p> </div>
Best Answer chosen by anil bolisetty 11
Khan AnasKhan Anas (Salesforce Developers) 
Hi Anil,

Greetings to you!

Please try below CSS:

CSS: 
.THIS {
}

.THIS.slds-box {
    border: 4px solid blue;
}

Component: 
<aura:component >
	<div class="slds-box" > 
        <p>This is a regular-sized box.</p> 
    </div>	
</aura:component>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Anil,

Greetings to you!

Please try below CSS:

CSS: 
.THIS {
}

.THIS.slds-box {
    border: 4px solid blue;
}

Component: 
<aura:component >
	<div class="slds-box" > 
        <p>This is a regular-sized box.</p> 
    </div>	
</aura:component>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
ApuroopApuroop
Before you directly make changes to the CSS, try this.
  
<aura:application extends="force:slds">
	<c:devTest1 />
</aura:application>
Deepali KulshresthaDeepali Kulshrestha
Hi Anil,

Please follow given below code with the help of below code you can solve your problem, it may be helpful to you. 

Component :
  
<aura:component>
    <div class="slds-box" >
        <p>This is a regular-sized box.</p>
    </div>
</aura:component>

CSS :

.THIS {
}

.THIS .slds-box {
    border: 3px solid red;
}

App :

<aura:application extends="force:slds">
    <c:Example_Cmp/>
</aura:application>
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha 
Ajay K DubediAjay K Dubedi
Hi Anil,
The CSS for your component can be like this :

.THIS {
}

.THIS.slds-box {
    border: 5px solid grey;
}

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi