JSFiddle of the offending code: Fiddle
Specifically bits like:
.start{
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
I'm working on a schedule table. The background for the entire table has a .5 alpha on the background color, so the page's background shows through. When something is scheduled the respective blocks are highlighted in specific colors. The first and last of these cells have a radius.
Ideally I'd like to be able to persist the .5 alpha background in the corners, where the radius leaves some white. I tried setting the background on the tr element, but that didn't persist (overruled by the class). Divs seem like a good option, but I don't want the borders between the cells (not done here for simplicity), and divs don't seem to allow for that in this case.
Set the background-color on the table element:
table {
border-spacing: 0;
background-color: rgba(0,0,0,0.5);
}
td {
border: 1px solid red;
width: 75px;
height: 50px;
}