Как сделать div, имеющий закругленный угол с двумя цветами?

Question

Может кто-нибудь предложить мне, как создать div с закругленными углами , но с двумя разными цветами, как в в этом примере

Вот код, который я использовал, чтобы сделать div с другим цветом, но не работал CSS:

.roundcont_n {
    width: 250px;
    background-color: white;
    color: #000;
}

.roundcont_n_u {
    width: 250px;
    background-color: #808080;
    color: #fff;
}
.roundcont_n_d {
    width: 250px;
    background-color: #606060;
    color: #fff;
}


.roundtop_n { 
    background: url(images/toprt.png) no-repeat top right; 
}

.roundbottom_n {
    background: url(images/btmrt.png) no-repeat top right; 
}

img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

Вот HTML-код:

<div class="roundcont_n">
 <div class="roundcont_n_u">
    <div class="roundtop_n">
     <img src="images/topLeft.png" alt="" 
     width="15" height="15" class="corner" 
     style="display: none" />sdfsdfsdfjlsdkjfkls
   </div>
 </div>
 <div class="roundcont_n_d">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
   elit, sed do eiusmod tempor incididunt ut labore et 
   dolore magna aliqua. Ut enim ad minim veniam, quis 
   nostrud exercitation ullamco laboris nisi ut aliquip 
   ex ea commodo consequat. Duis aute irure dolor in 
   reprehenderit in voluptate velit esse cillum dolore eu 
   fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
   non proident, sunt in culpa qui officia deserunt mollit 
   anim id est laborum.</p>

   <div class="roundbottom_n">
     <img src="images/btmLft.png" alt="" 
     width="15" height="15" class="corner" 
     style="display: none" />
   </div>
 </div>
</div>  

Здесь изображения btmLft.png и btmrt.png одного цвета, topLeft.png и toprt.png одного цвета

Заранее спасибо

Answer 1

Что вы подразумеваете под "двумя цветами"? Граница? Если это так, я реализовал это на моем сайте следующим образом:

div.bubbleContainer{
    display: inline-block;
    position:relative;
    width: 100%;
}

div.bubble{
    overflow:visible;
    background-color:#ffffff;
    margin-right:10px;
    margin-top:0px;
    border-width:3px; 
    border-color:#002e66; 
    border-style:solid;
    padding-left:10px;
    padding-right:10px;
}

img.bubble-topLeft{
    position:absolute;
    top:-1px;
    left:-1px;
}

img.bubble-topRight{
    position:absolute;
    top:-1px;
    right:9px;
}

img.bubble-bottomLeft{
    position:absolute;
    bottom:-1px;
    left:-1px;
}

img.bubble-bottomRight{
    position:absolute;
    bottom:-1px;
    right:9px;
}

<div class="bubbleContainer">
<img class="bubble-topRight" src="/gfx/bubble-topRight.png" alt="">
<img class="bubble-topLeft" src="/gfx/bubble-topLeft.png" alt="">
<img class="bubble-bottomLeft" src="/gfx/bubble-bottomLeft.png" alt="">
<img class="bubble-bottomRight" src="/gfx/bubble-bottomRight.png" alt="">
<div class="bubble">

<p>Lorem Ipsum dolor sit amet...</p>

</div></div>