alert with rounded corners in Ionic

Question

I've created an alert but the last thing I wanna do is to make the corners round. Here's my css code in app.scss:

    .my-class {
  .alert-head {
    background-color: white;
    height: 95px;
  }
  .alert-message {
    font-size: 20px;
  }
  .alert-button {
    color: dodgerblue;
    margin-right: 100px;
    font-family: "OpenSans";
    font-size: 22px;
  }
  .alert-title {
    text-align: center;
    font: bolder;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  .alert-subTitle {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

Answer 1

Simply you can add this code to any element that you want to round it yourselector { border-radius: 5 px; } yourselector { border-radius: 5 px; } if not working you can use this one to force it to accept your style yourselector { border-radius: 5 px !important; } yourselector { border-radius: 5 px !important; }

And also you should write your class name for each selector that you write like this

 .my-class .alert-head { background-color: white; height: 95px; } .my-class .alert-message { font-size: 20px; } .my-class .alert-button { color: dodgerblue; margin-right: 100px; font-family: "OpenSans"; font-size: 22px; } .my-class .alert-title { text-align: center; font: bolder; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .my-class .alert-subTitle { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }