Separating sidebar Widgets into boxes or containers for each

Hello, I am trying to make my sidebar’s widgets each be contained in their own box. like this:

https://posts-in-separate-boxes.blogspot.com/

I found that example from this tutorial:

https://www.blogbulk.com/2009/02/sidebar-gadgets-widgets-in-separate.html

However this is for Blogger and I don’t see a way that I can make it applicable to my wordpress sidebar.

Here is my sidebar.php markup:

<div id="sidebar">
<?php $args = array(
	'name'          => sprintf(__('Sidebar %d'), $i ),
	'id'            => "sidebar-$i",
	'before_widget' => '<li id="%1$s" class="widget %2$s">',
	'after_widget'  => '</li>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>' ); ?>
    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar Widgets')) : else : ?>

	<?php endif; ?>

</div>

And my css:

#sidebar { position:relative;  float:right; margin-right: 50px; margin-top: 90px; min-height:700px; width:178px; padding:4px 10px 10px 10px; background:#383636; border:solid 3px ; border-color:#646464; -moz-box-shadow: 3px 3px 8px 0px #383636;
-webkit-box-shadow: 3px 3px 8px 0px #383636;
box-shadow: 3px 3px 8px 0px #383636; z-index: 4; }

So I want my boxes to have the above styling

If anyone can help me I would be incredibly grateful

thanks