I'm trying to get the white box itself to have rounded corners in addition to its transparent gray border using CSS3. Is this possible?
html:
<div class="outer"><div class="inner"></div></div>
css:
.outer{
width: 300px;
height: 300px;
border: solid 10px;
border-radius: 5px;
border-color: rgba(0, 0, 0, 0.5);
}
.inner{
border-radius 5px;
}
Bonus question: What's with those black squares in the corners on Chrome?
EDIT: I found a discussion of the black squares: Weird border opacity behavior in Webkit?