Kendo Grid - Background color bleeds over radius on alt rows

Question

I am using the Kendo grid with no footer or scroll bar. The problem I am running to is that the rounded corners get overrun by the alt row background color. I want to keep the rounded corner as they match a number of other design elements on our page.

I'm not sure this is a Kendo issue as I can reproduce it without kendo. Here is a JSFiddle. Perhaps it is Kendo's rendering of the html/css.

Any thoughts? As we are using Kendo I can hack the html post kendo rendering for a quick solution but ultimately I would love to see Kendo fix this.

Here is my simple example. I am mimicking the html rendered by the Kendo Grid.

<div style="width:400px;border-radius:20px;border:1px solid red;">
    <table style="width:100%;">
        <tr>
            <td>blah</td><td>more blah</td>
        </tr>
        <tr style="background-color:lightblue;">
            <td>blah</td><td>more blah</td>
        </tr>
    </table>
</div>

Answer 1

This is definitely not a kendo problem, but a pretty common CSS problem.

One way of solving it is by adding overflow:hidden; in the div container.

Here is a jsFiddle. You can apply this onto the content div of kendoGrid with the following css:

.k-grid-content {
   overflow:hidden;
}