Edit Individual Widget Borders in Sidebar

It looks like you have a custom theme, so you should be able to easily add this CSS rule:

#oio-widget-2 .widget-wrap {
   border: 0px;
   background: transparent;
}

The #oio-widget-2 selector targets that particular widget.

The border property, of course, affects the border, and setting it to zero will hide it.

I also suggest adding the background property as shown above, otherwise you get a white box for the background that doesn’t quite look right.

Thank you! Would I add this in the stylesheet? Also, is there a way to figure out what code is for which widget so I add this code under the appropriate area?

Would I add this in the stylesheet?

You never want to edit the theme’s stylesheet directly; if the theme ever gets updated/upgraded, you will lose your changes. The Responsive theme does offer an option to add your own custom CSS. From your admin dashboard, go to Appearance > Theme Options > CSS Styles and add it in the big input field labeled Custom CSS Styles. Make sure you click the Save Options button at the bottom.

Also, is there a way to figure out what code is for which widget so I add this code under the appropriate area?

Yes, you can use a browser plug-in/extension like Firebug for Firefox (which you have to install) or Chrome Developer Tools, which is a part of Chrome. For each tool, you right-click on the web page element that you look at and select Inspect element from the pop-up menu. You’ll want to play with the tool for a while to get comfortable with everything it can do, but once you become familiar with it, you’ll be able to see how to style different elements of your web page interactively, i.e., you can apply CSS styles from the tool’s console and see how it looks right away before you actually add the CSS to your custom CSS option.

Wow OK thank you so so much for all your help!