Question

I’ve looked at several Stack Overflow questions and while some have helped me craft what I have so far I sill can’t get it to look exactly like what I am after. I am trying to achieve this.

So far this is my result when viewed.

It seems like it’s almost there except for those white corners in the middle area. Can anyone help me work out what im doing wrong? My code is as follows.

HTML:

<div class="outerborder">
       <div class="middleborder">   
           <div class="innerborder">
               <div class="contentarea">

                  Text here lalalalala

               </div>
           </div>
       </div>
    </div>

CSS:

.outerborder
{
 border-radius:10px;
 border: 1px solid #000;
}

.middleborder
{
 border-radius:10px;
 border: 10px solid rgba(102,153,102, .5);
}

.innerborder
{     
 border-radius:10px;
 border: 1px solid #000;
}

.contentarea
{
 padding: 10px;
 border-radius:10px;
 background: #c7c7c7;
}

Answer 1

I am editing this further.

Get rid of the middleborder and use this.

    <style>
        .outerborder
        {
         border-radius:10px;
         border: 1px solid #000;
         background:rgba(102,153,102, .5);
         padding:10px;
        }

        .contentarea
        {
         padding: 10px;
         border-radius:10px;
         background: #c7c7c7;
         border: 1px solid #000;
        }
        </style>
        <div class="outerborder">
         <div class="contentarea">
             Text here lalalalala
         </div>
       </div>​