HTML and CSS: how to make rounded corners on tables main corners

Question

How am I supposed to exactly have 4 corners of this table to be rounded, I tried border-radius{ on table{ and it still doesnt work, and if do on the cells, it rounds every cells, i just want the main 4 corners of the table to be round?

table{
    /*removing the borders between the cells*/
    border-collapse:collapse;
    font-size: 14px;
    /*table shadow*/
    box-shadow: 0 6px 5px 1px rgba(0, 0, 0, 0.15);
    margin-top: 40px ;
    width: 70%;
    height: 60%;
    border-radius: 15px;
}

https://jsfiddle.net/qy4r3wn9/

score 4 · Accepted Answer · answered Dec 30 '21 at 07:31

You likely have to add

table { overflow: hidden; }

in order to let the (invisible) border actually snip off the content inside. Currently, if you were to make the border visible (border: 1px solid red;) you'll see that your curved corners work just fine, but that the cell contents just stick out beyond the border.

HTML and CSS: how to make rounded corners on tables main corners

1 Answers1