The CSS table has a rounded background, but its borders have a squared design

Question

The CSS table has a rounded background, but its borders have a squared design

I am attempting to design a table with rounded top borders on both sides, while the remaining borders of the table remain squared.

Despite applying CSS, the borders continue to appear squared, although the background-color is indeed rounded, resulting in an odd appearance:

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 outcome looks like this:

Is there a way to achieve a 'rounded' effect on the borders in the top left/right header cells so that the red border aligns with the background color?

For a demonstration, please refer to the JSFiddle.

html css

Answer 1

Answer №1

The reason for this is that the border collapsed using:

CSS

table {
    border-collapse: collapse;
}

Check out this quick solution.

Answer 2

The reason for this is that the border collapsed using:

CSS

table {
    border-collapse: collapse;
}

Check out this quick solution.

Answer 3

Answer №2

modify:

   table {
    border-collapse: collapse;
}

to:

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

DEMO

Answer 4

modify:

   table {
    border-collapse: collapse;
}

to:

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

DEMO

Answer 5

Answer №3

To address this issue, consider simplifying the solution by specifying the border properties exclusively for the table element, rather than applying them to both the th element and td element.

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/

Answer 6

To address this issue, consider simplifying the solution by specifying the border properties exclusively for the table element, rather than applying them to both the th element and td element.

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/

Answer 7

Answer №4

Below is an example of how to use the following code:

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}

Answer 8

Below is an example of how to use the following code:

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}

The CSS table has a rounded background, but its borders have a squared design

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The autoplay feature of the HTML5 audio player is not working on iOS Safari

The hover effect on MUI TableRows is being overshadowed by the background color of the TableCell

What is the best way to center my menu/logo instead of having it all the way to the right?

Make sure that the two rows in my Bootstrap table are consistently positioned next to each other, regardless of the length of the text

Building a local storage feature using HTML5 WebControl in a Winform application

Top ways to avoid default on anchor tags: best practices for preventing this issue

Utilizing the "row" and "column" attributes in Angular (Flexbox) results in significant spacing between input fields within the HTML code

A guide on converting an HTML tag ID to a PHP string

Display the contents of an array retrieved using the getElementById method

Query in MySQL to select distinct rows and non-distinct rows

jQuery counter no longer updates when scrolling

Pause the YouTube video and swap it out with an image

Having trouble with displaying the modal dialog in Twitter Bootstrap 3?

Querying Using Multiple Filter Selectors

What is the best way to ensure the box div is centered responsively?

AngularJS, Gridster, and n3-charts are causing a $digest error in Chrome and Firefox, but not in Safari

Inconsistency with div heights in Chrome, unlike Firefox and IE where it works smoothly

Accordion checkbox with dynamic features

Troubleshooting material design CSS problem in AngularJS routing module

Retrieve the blob value from outside the canvas by using the ToBlob() function asynchronously