How to add border radius on table row

Question

Does anyone know how to style tr as we like?

I\'ve used border-collapse on table, after that tr\'s can display 1px solid border I give them.

However, when I\

Answer 1

The tr element does honor the border-radius. Can use pure html and css, no javascript.

JSFiddle link: http://jsfiddle.net/pflies/zL08hqp1/10/

tr {
    border: 0;
    display: block;
    margin: 5px;
}
.solid {
    border: 2px red solid;
    border-radius: 10px;
}
.dotted {
    border: 2px green dotted;
    border-radius: 10px;
}
.dashed {
    border: 2px blue dashed;
    border-radius: 10px;
}

td {
    padding: 5px;
}

    

        
01
        
02
        
03
        
04
        
05
        
06
    
    

        
07
        
08
        
09
        
10
        
11
        
12
    
    

        
13
        
14
        
15
        
16
        
17
        
18
    
    

        
19
        
20
        
21
        
22
        
23
        
24
    
    

        
25
        
26
        
27
        
28
        
29
        
30