Menu
Consider a div with the border-radius, border, and background-color CSS attributes applied:
<div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;"> Blah </div>
Now consider a similar layout but with the background-color specified in an inner-div:
<div style="border-radius:10px; border: 1px black solid;"> <div style="background-color:#EEEEEE;"> Blah </div> </div>
I'm dismayed by the fact that the background-color of the inner <div> is obscuring the border of the outer <div>.
This is a simplified sample of the problem. In reality, I'm using a <table> as the inner element with alternating row colors. And I'm using a <div> as the outer element since border-radius does not seem to work on the <table> element. Here's a jsfiddle of a sample of this problem.
Does anyone have a suggestion for a solution?
549
The only difference between them is the right button has a radius of 5px applied. As with borders, radius allows you to set different properties for each side of the element using the toggle controls.
CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.
The border-color property is used to set the color of the four borders. The color can be set by: name - specify a color name, like "red"
Try overflow:hidden in the outer div:
<div style="border-radius:10px; border: 1px black solid; overflow: hidden"> <div style="background-color:#EEEEEE;"> Blah </div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
