Border Radius of Table is not working

Question

I want to add a border radius around the entire table. But the following code is not working in both the latest versions of Firefox and Google Chrome.

HTML

Answer 1

This is my solution using the wrapper, just removing border-collapse might not be helpful always, because you might want to have borders.

.wrapper {
  overflow: auto;
  border-radius: 6px;
  border: 1px solid red;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  border-style: hidden;

  width:100%;
  max-width: 100%;
}

th, td {
  padding: 10px;
  border: 1px solid #CCCCCC;
}

  

    

      

        
Column 1
        
Column 2
        
Column 3
      
    

    

      

        
Foo Bar boo
        
Lipsum
        
Beehuum Doh
      
      

        
Dolor sit
        
ahmad
        
Polymorphism
      
      

        
Kerbalium
        
Caton, gookame kyak
        
Corona Premium Beer
      
    
  
  

This article helped: https://css-tricks.com/table-borders-inside/