Those are not borders, they are shadows. You can get rid of them with something like:
aside { box-shadow:none; }
But, it looks like you have a theme from the WP theme repository. If you edit the CSS file as soon as it updates your changes will be overwritten. Or are you using a child theme? A child theme is the right way to modify a theme.
Thread Starter
woohop
(@woohop)
Thank you for your reply.
Yes, I am using a child theme but when I added: aside { box-shadow:none; } to the child theme’s style.css, nothing happened. Do you know what it might be?
The issue is probably that the shadow is applied to a class on the aside element, not the element itself.
A crude solution would be to try:
aside { box-shadow:none !important; }
Or, if you know how to inspect the source code with Firebug on the Firefox browser, or Dev Tools on Chrome, you can find the exact CSS rule that creates the shadow. Just copy the selector in that rule, with box-shadow: none, and it will override the parent theme style.
This technique is the key to styling a child theme, and its a fundamental tool in web design. If its not obvious how it works, I would google a video tutorial on Styling CSS with Firebug.
Thread Starter
woohop
(@woohop)
I am using dev tools and I tried a couple things, and none had any affect. I am still trying to figure it out but looking closely at the box-shadow, its looks styled. The ends of the line are curved. I don’t know if you saw that before, but I was wondering if maybe it wasn’t a box shadow but an image or some other styled thing?
It looks like it sets a box shadow on the class .widget. I can see that in Chrome dev tools.
So maybe try aside.widget {box-shadow: none;}? Possibly with the !important property also.
