How To Sparate Gadget Sidebar Blogger

You should keep in mind:

► this is the example for the Blogs that already have a customized (stylized) Sidebar (colorized, borderized..)
► this example was made in Minima Blogger template (so your code may be a bit different, but the procedure is the same)
► it doesn't matter if you have "heavily" customized template, you can apply these setting anyway

UNDERSTAND THIS
We have to imitate the main style of our sidebar-wrapper (the one that carries the style for the whole sidebar element), and apply it to individual widgets (gadgets). Here's the style of the sidebar-wrapper in this example:

#sidebar-wrapper {
background:#ADD8E6;
border: 1px solid #E9967A;
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

...the styles we're interested in here are: background and border
...next is to apply this to our widgets...

Ok, LET'S DO IT
First, back up your current Blogger template. Then, go to: LAYOUT ► EDIT HTML ► and locate this part in the code (this is for default Minima blogger template, it may look a bit different for you):

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

...DELETE it, and replace with this one:

.sidebar .widget {
background:#ADD8E6;
border: 1px solid #E9967A;
margin:0 -5px 1.5em -5px;
padding:5px 7px 5px 7px;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

...we've divided the main widget and sidebar widget in order to apply the style...
...in pink, you can see the copied style from sidebar-wrapper...
...in green, you can adjust the padding of the widget content (if the padding was 0px, the text would be to close to the border)..

► Next thing is to delete (hide) the style from the sidebar-wrapper. Why? Because if you don't, your sidebar will look like this:
To avoid this, find the sidebar-wrapper:

#sidebar-wrapper {
background:#ADD8E6;
border: 1px solid #E9967A;
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

...and DELETE the background and border (or any other style you've applied to your widgets/gadgets):

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}