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

0

Issue

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/

Solution

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.

Answered By – Raxi

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More