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