# Custom modal with border radius

**URL:** <https://forum.ionicframework.com/t/custom-modal-with-border-radius/192560>\
**Category:** Ionic Angular\
**Created:** [July 10, 2020, 2:57pm UTC](https://forum.ionicframework.com/t/custom-modal-with-border-radius/192560 "2020-07-10T14:57:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rubenmiq](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@rubenmiq](https://forum.ionicframework.com/u/rubenmiq)\
**Post date:** [July 10, 2020, 2:57pm UTC](https://forum.ionicframework.com/t/custom-modal-with-border-radius/192560/1 "2020-07-10T14:57:22Z")

</div>

Hi guys,  
I am making a custom modal with a border radius so i can have rounded corners. i manage to do what i want, but the modal content will automatically have a scroll.  
I tried to figure it out on the css but no luck.  
Any one has any ideas? Here is my code.  
CSS

```auto
.message-modal {
    --height: 250px;
    --max-height: 250px;
    --border-width: 1px;
    --border-style: solid;
    --border-color: var(--ps-page-background2);    
    align-items: flex-end;
    --backdrop-opacity: 0.3;    
    --border-radius: 10px 10px 0px 0px;
}

```

TS

```auto
const modal = await this.modalCtrl.create({
      component: MessagePage,
      cssClass: 'message-modal'
    });

```

And here is the result

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/1/b/1be47ec4da688fb965edeb0e5d1a9ff6b4df8888.png)

---

<div class="post-metadata">

**Author:** ![rrgt19](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rrgt19/32/132772_2.png) [@rrgt19](https://forum.ionicframework.com/u/rrgt19)\
**Post date:** [April 1, 2022, 9:29pm UTC](https://forum.ionicframework.com/t/custom-modal-with-border-radius/192560/2 "2022-04-01T21:29:03Z")

</div>

If you are using **Ionic 6** , you can do it like follow:

```nohighlight
async presentModal() {
    const modal = await this.modalCtrl.create({
      component: SimpleModalPage,
      breakpoints: [0, 0.4, 1],
      initialBreakpoint: 0.4,
      cssClass: 'custom-modal' // Note this
    });
    await modal.present();
  }

```

**src/global.scss**

Example to change all…

```css
.custom-modal {
    --backdrop-opacity: 1;
    backdrop-filter: blur(3px);

    &::part(backdrop) {
        background: #000;
    }

    &::part(handle) {
        background: var(--ion-color-primary);
        width: 150px;
        height: 6px;
    }

    &::part(content) {
        border-radius: 20px; // Here the border radius
        box-shadow: 0px 0px 20px 5px rgb(0 0 0 / 32%);
    }
}

```

For more information about Modal Sheet, please see:

> **[5 Examples of the new Ionic 6 Bottom Sheet Modal](https://ionicframework.com/blog/5-examples-of-the-new-ionic-6-bottom-sheet-modal/)**
>
> Get the details on how to use the brand new Ionic Bottom Sheet component in this guest blog post from Simon Grimm.