tags:

views:

382

answers:

2

Hi every body!! Can anyone suggest me how to create div with rounded corners but with two different color like in this example

Here is the code I have used to make div with different color but did not work 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;
}

Here is the html code:

<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>

Here images btmLft.png and btmrt.png are of same color, topLeft.png and toprt.png are of same color

Thanks in advance

+1  A: 

What do you mean with "two colors"? A border? If so, I have implemented that on my site like this:

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>
Michael Borgwardt
Thank you Michael. I don mean the color of the border. On this link http://boxover.swazz.org/ we see the boxover. i need the same but with rounded corners.
those examples do have borders. But there isn't really anything you need to do different, except use different colors for the top and bottom images and subdivide the main div into two areas with different color
Michael Borgwardt
Thanks again it worked but the background color is displayed on each corner of the images and rounded corners and displayued because i am displaying it as pop up (might not be the perfect word i.e. pop up let me say message box on mouse hove on the text)
You'll have to use a GIF or PNG image with a background color marked as transparent.
Michael Borgwardt
A: 

You can generate the images required for that popup with EasyImg ([www.easyimg.com]). There's an opacity setting that you can specify that is applied to the image right before rendering to make it semi-transparent. EasyImg will also handle the rounded corners for you.

Hope this helps.