Is there a clean way to get borders on a in pure CSS?

Question

I\'d like to set a background and a rounded border on a , such as

tbody { border-radius: 15px; border: 1px solid black; background         


        

Answer 1

Assuming you have collapsed the borders in the table, simply set display:block on the tbody and apply the border-radius.

Codepen example

CSS

table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    width: 600px;
}

tbody {
    background: #ccf;
    border: 1px solid black;
    border-radius: 15px;
    display: block;
}

th, td {
    width: 200px;
}

td, th {
    padding: 5px;
    text-align: center;
}