How-to create rounded corners on Table Head only

Question

I would like to know how to create a rounded corners on a table head only?

Additional detail... I want to have a rouded head of the table the rest of the table is a rect

Answer 1

There are a number of options. It depends on what you really want to achieve visually.

But be sure that border-collapse is NOT set to collapse, because that will not work. For more information, see this mozilla link: https://developer.mozilla.org/en/CSS/border-radius

#uno,
#due th,
#tre th {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border: 1px solid black;
}
#tre td {
  border: 1px solid black;
}

  

    
Header 1
    
Header 2
  
  

    
row 1, cell 1
    
row 1, cell 2
  
  

    
row 2, cell 1
    
row 2, cell 2
  






  

    
Header 1
    
Header 2
  
  

    
row 1, cell 1
    
row 1, cell 2
  
  

    
row 2, cell 1
    
row 2, cell 2
  






  

    
Header 1
    
Header 2
  
  

    
row 1, cell 1
    
row 1, cell 2
  
  

    
row 2, cell 1
    
row 2, cell 2