html5 - CSS table background is rounded but borders are squared -
i trying create table has rounded top borders on either side, rest of table's borders squared.
when apply css border remain squared, background-color
does rounded off, creates weird look:
table {border-collapse:collapse} th {border-top:1px solid red; width:70px} th, td {text-align:left; background-color:#cccccc} th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px} th.header2 {border-top:1px solid red; border-right:1px solid red; border-top-right-radius:20px}
the result this:
how 'round' borders in top left/right header cells please red border follows background?
please see jsfiddle working example.
Comments
Post a Comment