Customize rounded corners in Angular Menu component

12 Sep 20254 minutes to read

You can apply rounded corners to the Angular Menu component by assigning a custom CSS class using the cssClasscssClass property. This allows you to modify the appearance of the menu container to better match your application’s design.

How to Apply Rounded Corners

To achieve rounded corners, define a CSS class with the desired border-radius value and assign it to the Menu component via the cssClass property.

For more information, refer to the style.css file mapped under the source tab.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MenuModule } from '@syncfusion/ej2-angular-navigations'



import { Component } from '@angular/core';
import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [ MenuModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Menu. -->
            <ejs-menu [items]='menuItems' cssClass='e-rounded-menu'></ejs-menu>
            </div>`
})

export class AppComponent {
    menuItems: MenuItemModel[] = [
    {
        text: 'File',
        items: [
            { text: 'Open' },
            { text: 'Save' },
            { text: 'Exit' }
        ]
    },
    {
        text: 'Edit',
        items: [
            { text: 'Cut' },
            { text: 'Copy' },
            { text: 'Paste' }
        ]
    },
    {
        text: 'View',
        items: [
            { text: 'Toolbar' },
            { text: 'Sidebar' }
        ]
    },
    {
        text: 'Tools',
        items: [
            { text: 'Spelling & Grammar' },
            { text: 'Customize' },
            { text: 'Options' }
        ]
    },
    { text: 'Go' },
    { text: 'Help' }];
}

app.component.ts

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';

.e-section-control {
	margin-top: 150px;
}

/* Styles to achieve rounder corner in menu */
.e-menu-wrapper.e-rounded-menu:not(.e-menu-popup),
.e-menu-wrapper.e-rounded-menu .e-menu {
  border-radius: 20px;
}

/* Increased the menu component left and right padding for better rounded corner UI */
.e-menu-wrapper.e-rounded-menu ul.e-menu {
  padding: 0 14px;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));