CSS - gradient "border" using classes

Question

I'm working on a project, and I want the design to be "smooth". To achieve this, I'm using CSS gradient. However, I don't know exactly how to achieve what I want. My CSS code are as following:

#wrapper .midcontainer
{
 width: 1000px;
 margin: 20px auto;
}

#wrapper .midcontainer .mid
{
 width: 980px;
 background: #2d2929;
 position: relative;
}

#wrapper .midcontainer .mid .left
{
 background: #2d2929;
 background: -webkit-linear-gradient(right, #2d2929, #e0e0e0);
 background: -o-linear-gradient(right, #2d2929, #e0e0e0);
 background: -moz-linear-gradient(right, #2d2929, #e0e0e0);
 background: linear-gradient(right, #2d2929, #e0e0e0);
 width: 10px;
 height: 100%;
 position: absolute;
 left: -10px;
}

#wrapper .midcontainer .mid .right
{
 background: #2d2929;
 background: -webkit-linear-gradient(left, #2d2929, #e0e0e0);
 background: -o-linear-gradient(left, #2d2929, #e0e0e0);
 background: -moz-linear-gradient(left, #2d2929, #e0e0e0);
 background: linear-gradient(left, #2d2929, #e0e0e0);
 width: 10px;
 height: 100%;
 position: absolute;
 right: -10px;
}

#wrapper .midcontainer .mid .top
{
 background: #2d2929;
 background: -webkit-linear-gradient(bottom, #2d2929, #e0e0e0);
 background: -o-linear-gradient(bottom, #2d2929, #e0e0e0);
 background: -moz-linear-gradient(bottom, #2d2929, #e0e0e0);
 background: linear-gradient(bottom, #2d2929, #e0e0e0);
 width: 1000px;
 height: 10px;
 position: absolute;
 top: -10px;
 left: -10px;
 border-top-radius: 5px;
}

#wrapper .midcontainer .mid .bot
{
 background: #2d2929;
 background: -webkit-linear-gradient(top, #2d2929, #e0e0e0);
 background: -o-linear-gradient(top, #2d2929, #e0e0e0);
 background: -moz-linear-gradient(top, #2d2929, #e0e0e0);
 background: linear-gradient(top, #2d2929, #e0e0e0);
 width: 1000px;
 height: 10px;
 position: absolute;
 bottom: -10px;
 left: -10px;
 border-bottom-radius: 5px;
}

My HTML code is:

  <div class="midcontainer">
   <div class="mid">   
    <div class="top"></div>
    <div class="bot"></div>
    <div class="left"></div>
    <div class="right"></div>
    test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
    </div>
  </div>

My result is looking like this:

I want the edges to have a radius and intercept. I'm open to suggestions about developing this code differently. However, it's not looking really good in the edges. Do you have a suggestion?

Answer 1

You could use box-shadow to create a similar effect

<div class="shadow"> test </div>

div .shadow{
box-shadow: 0px 0px 10px 5px rgb(85, 85, 85);
}

A few modifications should get you exactly what you want.

Answer 2

answer is already given , it is mainly about the gradients as the question mentions them.

They can be used as multiple background and sized to be sprayed all around a box and even be animated.

If you use background-image and box-shadow:inset x x x , the shadow can cover the background-image.

---

DEMO with a single div , using:

• multiple gradients,
• shadow (as answered)
• or a mix of gradient and inset shadow