troubleshooting Question

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

Avatar of Peter Kiers
Peter KiersFlag for Netherlands asked on
1 Comment1 Solution8 ViewsLast Modified:
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;

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
Join our community to see this answer!
Unlock 1 Answer and 1 Comment.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros