We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid rounded corners (border radius)

Is it possible to apply rounded corners to the JS Grid control?

I've tried the following CSS but it doesn't work (see screenshot):

.e-grid {
  border-radius: 10px;

5 Replies 1 reply marked as answer

RO Rob March 2, 2023 11:53 AM UTC

Zoomed image:

RS Rajapandiyan Settu Syncfusion Team March 3, 2023 12:59 PM UTC

Hi Rob,

Thanks for contacting Syncfusion support.

By using the following the CSS, you can apply round corners to the Grid component.





      .e-grid .e-toolbar {

        border-radius: 10px;


      .e-grid .e-toolbar .e-toolbar-items {

        border-radius: 10px 10px 0 0;


      .e-grid .e-gridpager {

        border-radius: 0 0 10px 10px;




Sample: https://stackblitz.com/edit/39q6jt?file=index.js,index.html


Rajapandiyan S

Marked as answer

RO Rob March 3, 2023 02:56 PM UTC

Perfect - thanks Rajapandiyan!

TC Taylor Cooke June 12, 2023 02:18 PM UTC

Hi, I tried that snippet and my table is still showing what is displayed in the image above.

Screen Shot 2023-06-12 at 10.15.04 AM.png

Screen Shot 2023-06-12 at 10.14.57 AM.png

and here is my inspected table: 

Screen Shot 2023-06-12 at 10.17.54 AM.png

PS Pavithra Subramaniyam Syncfusion Team June 13, 2023 04:27 AM UTC

Hi Taylor Cooke,

Since you are not using the Grid toolbar, please use the below CSS to achieve your requirement.

.e-grid {

  border-radius: 10px;



.e-gridheader {

  border-radius: 10px 10px 0 0;


.e-gridcontent {

  border-radius: 0 0 10px 10px;




Sample: https://stackblitz.com/edit/2q8ocn?file=index.html,index.js

Please get back to us if you need further assistance on this.


Pavithra S

Live Chat Icon For mobile
Up arrow icon