Link to home
Create AccountLog in
Avatar of Peter Kiers
Peter KiersFlag for Netherlands

asked on

How to create a html table with border and shadow and rounded corners?

Dear experts,
How can i create a table in HTML that contains a border, a shadow and rounded corners?

This is what i got so far:


table {
     width: 50%; /* tabelbreedte de helft */
     box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
       border-radius: 4px;  
}


table, th, td {
  border: 1px solid #C8C8C8;
  border-collapse: collapse;


}

Open in new window

I have a border and a shadow but no rounded corners. That is because border-collapse is set to collapse. When i change it to "seperate" the rounded corners will be shown. But I need border-collapse to stay on collapse. How can i solve this. It it even possible?

Gr. P
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer