New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Rounded Corners


Modern Browsers:

Customer IDCompany NameContact NameContact TitleAddressPostal Code
123456
 Item 1 to 5 of 30
Page:
of 6 GoPage size:
ALFKIAlfreds FutterkisteMaria AndersSales RepresentativeObere Str. 5712209
ANATRAna Trujillo Emparedados y heladosAna TrujilloOwnerAvda. de la Constitución 222205021
ANTONAntonio Moreno TaqueríaAntonio MorenoOwnerMataderos 231205023
AROUTAround the HornThomas HardySales Representative120 Hanover Sq.WA1 1DP
BERGSBerglunds snabbköpChristina BerglundOrder AdministratorBerguvsvägen 8S-958 22

Cross-browser solution:

Customer IDCompany NameContact NameContact TitleAddressPostal Code
123456
 Item 6 to 10 of 30
Page:
of 6 GoPage size:
BLAUSBlauer See DelikatessenHanna MoosSales RepresentativeForsterstr. 5768306
BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager24, place Kléber67000
BOLIDBólido Comidas preparadasMartín SommerOwnerC/ Araquil, 6728023
BONAPBon app'Laurence LebihanOwner12, rue des Bouchers13008
BOTTMBottom-Dollar MarketsElizabeth LincolnAccounting Manager23 Tsawassen Blvd.T2F 8M4

There are two ways to round off the corners of the RadGrid.

The first one is easier and can be acheived with the following CSS rule:

.RadGrid
{
   border-radius: 10px;
   overflow: hidden;
}
  • DefaultVB.aspx
  • scripts.js
  • styles.css
<%@ Page Language="vb" AutoEventWireup="false"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <br />
    <h3 style="color: #333333; font-size: 16px; font-weight: normal; margin: 0 0 15px;">Modern Browsers:</h3>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" Skin="MetroTouch" CssClass="RadGrid_ModernBrowsers"
        AllowPaging="True" PageSize="5" AllowSorting="True" Width="95%">
        <PagerStyle Mode="NextPrevNumericAndAdvanced"></PagerStyle>
        <MasterTableView Width="100%">
        </MasterTableView>
    </telerik:RadGrid>
    <br />
    <h3 style="color: #333333; font-size: 16px; font-weight: normal; margin: 0 0 15px;">Cross-browser solution:</h3>
    <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid2" DataSourceID="SqlDataSource1" runat="server" Skin="MetroTouch" CssClass="RadGrid_Rounded"
        AllowPaging="True" PageSize="5" AllowSorting="True" Width="95%">
        <PagerStyle Mode="NextPrevNumericAndAdvanced"></PagerStyle>
        <MasterTableView Width="100%">
        </MasterTableView>
        <ClientSettings>
            <ClientEvents OnGridCreated="onGridCreated" />
        </ClientSettings>
    </telerik:RadGrid>
    <br />
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 30 CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
        runat="server"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance