CODEWITHSUNDEEP
htmlcss
EvilDr
EvilDr

Reputation: 9610

CSS table background is rounded but borders are squared

I am trying to create a table that has rounded top borders on either side, but the rest of the table's borders are squared.

When I apply this CSS the border remain squared, but the background-color does get rounded off, which creates a 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 is this: enter image description here

How do I 'round' the borders in the top left/right header cells please so that the red border follows the background?

Please see the JSFiddle for a working example.

Upvotes: 1

Views: 505

Answers (4)

beuhug
beuhug

Reputation: 21

change:

   table {
    border-collapse: collapse;
}

to:

 table {
    border-collapse: separate;
    border-spacing: 0px 0px;
}

DEMO

Upvotes: 2

YD1m
YD1m

Reputation: 5895

This is because border collapsed with:

CSS

table {
    border-collapse: collapse;
}

Look at quick fix.

Upvotes: 9

Raymond Ramirez
Raymond Ramirez

Reputation: 11

Use the code in this way:

table {border: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}

Upvotes: -1

surfine
surfine

Reputation: 1

It can be solved rather simply by assigning the border properties only to the table tag instead of assigning them to the th tag and td tag.

table {
    background: #ccc;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 1px solid red;
}
th {
    width: 70px;
}
th, td {
    text-align: left;
}

http://jsfiddle.net/Tomer123/z5832/9/

Upvotes: 0

Related Questions