Applying border radius settings to individual tables and/or cells

[DRandall]

Hello,

I am trying to add a border radius element to specific tables on my website (round out the corners) but am not sure how. All examples I can find online show you how to add the border radius to the main TABLE .TR .TD section, but I don’t want the settings to apply to EVERY table on my page. I want to be able to call a class of some sort, so I can apply individual border radius settings (per quadrant) on a one-by-one table basis.

Thank you in advance for your help.

[Paulie_D]

I want to be able to call a class of some sort, so I can apply individual border radius settings (per quadrant) on a one-by-one table basis.

So what have you tried?

This would probably required 5 classes or more…or you could try something like this

https://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i

[DRandall]

I’m not trying to collapse a table, I’m just new to CSS and don’t know the syntax for adding a class to an individual table (or cell) itself.

[Paulie_D]

The same way you add a class to anything…in the HTML

<table class="myclass">

etc

[DRandall]

Here is something recent I have tried:

table.comment td {
border-bottom-left-radius: 8px;
}

and then in one of my table cells, assigning the class like this:

But this does not result in the table cell inheriting any kind of style.

I have tried giving the style to the table itself (not the td) and this does work, but it gives every in the table the style and this is not what I want. I want to be able to give specific table cells the style. Thanks.

[DRandall]

Sorry, the missing code should be:

[DRandall]

Hm, don’t know why the sample html isn’t showing up, but it’s just td class = “comment”

[JeroenR]

Your CSS selector is table.comment td, so that expects a class ‘comment’ on your table element.
What you describe is a class ‘comment’ on the table-cell, therefore your selector should be table td.comment.

[Paulie_D]

https://codepen.io/Paulie-D/pen/eEebpN

[DRandall]

Awesome, thank you. :)

[Author]

Posts