Not all custom css are working – especially border-radius

  • lilisanfilippo

    (@lilisanfilippo)


    9 months ago

    Hello,

    under Appearance > Customize > Additional css I put down some css to modify tables:

    table, th, td {
    border: 1px solid black;
    border-radius: 10px;
    }

    “border” is working, I already tried different px and it changes them accordingly.

    But “border-radius” is not working.

    <span style=”text-decoration: underline;”>Theme:</span> Twenty-Twenty-One

    <span style=”text-decoration: underline;”>version:</span> 6.4.2 (but it did not work before the update either)

    This also applies to some other css, but this is the one I want to use.

    Thank you.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • luk4

    (@luk4)

    Hi @lilisanfilippo

    The border-radius property does not apply to table elements when border-collapse is collapse.

    See: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

    So you have to set border-collapse: separate; to table:

    
table {
  border-collapse: separate;
}

    Also, you don’t have a th elements in your table, but tr. So it should be table, tr, td { ... }. I don’t know what style you’re looking for exactly, but maybe applying a border only to table or only to td would be enough though.

Viewing 1 replies (of 1 total)
  • The topic ‘Not all custom css are working – especially border-radius’ is closed to new replies.