border-radius + box-shadow problem

  • Resolved tigrica

    (@tigrica)


    7 years, 10 months ago

    Hello, 1st to say this is great plugin!

    I have a problem with rounded corners that i want to make on my table. problem is that i cant manage to make box-shadow to follow rounded corner(border-radius).
    i made rounded corners with this code:

    .tablepress thead th:first-child {
	border-top-left-radius: 10px;
}
.tablepress thead th:last-child {
	border-top-right-radius: 10px;
}
.tablepress tbody tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}
.tablepress tbody tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}

    And that work fine. The problem is that when i try to add box-shadow:

    .tablepress {
	box-shadow: 0 0 3px #5C5C5C;
	-moz-box-shadow: 0 0 3px #5C5C5C;
	-webkit-box-shadow: 0 0 3px #5C5C5C;

    That shadow wont follow rounded corners it goes like on this:

    • This topic was modified 7 years, 10 months ago by tigrica.
    • This topic was modified 7 years, 10 months ago by tigrica.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Unfortunately, I don’t know a solution to this at the moment, but the problem might be that you are applying the box shadow to the actual <table> element, whereas the round corners are applied to the table cells in the corners of the table (<th> and <td>) elements.

    Regards,
    Tobias

    Thread Starter tigrica

    (@tigrica)

    Hmmm yes i understand. Thank you for the ultra fast response anyway ??

    1 more question is it possible to add rounded corners in some other way? i saw this solution here in some other topic when i was searching for my problem. So is it posible to put border-radius directly on <table> and not like this on <th> and <td>

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    to be honest, I’m not sure, as I have not really experimented with this in more depth. Your best chance probably is to try playing around with this yourself, e.g. by using the browser’s Developer Tools (I recommend Chrome for this), as that’s way faster than using CSS and reloading the page every time.

    Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘border-radius + box-shadow problem’ is closed to new replies.