Grid rounded corners (border radius)

[Rob]

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;
}

[Rob]

Zoomed image:

[Rajapandiyan Settu]

Hi Rob,

Thanks for contacting Syncfusion support.

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

 

[index.html]

    <style>

      .e-grid,

      .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;

      }

    </style>

 

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

Regards,

Rajapandiyan S

[Rob]

Perfect - thanks Rajapandiyan!

[Taylor Cooke]

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

and here is my inspected table: 

[Pavithra Subramaniyam]

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.

Regards,

Pavithra S