How to Add Border to Sidebar

Hello!

I was wondering if it would be possible to add a thin grey border around my widgets/sidebar. On the sidebar I currently have social media links and an About Me section that I would like to “separate” from my blog posts.

Thank you,

Hey there,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*side bar border*/
div#secondary {
    border: solid 1px lightgrey;
    padding-top: 20px;
}

Best regards,
Support.

Hello!

Thank you for the response. I was searching through your forum and found another CSS code. I prefer this one as it encompasses each widget separately; however, my “Navigation Menu” widget has a different font than my theme and the border does not work. Could you help me with this please?

Please see image attached or my site is biteburnbella.com

Thank you!

Please use below custom CSS code to achieve this.

#secondary .widget { padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; border: 1px solid; border-radius: 5px; border-color: #9e9e9e; }