Using border-radius to the button

Question

Here's my CSS code

.btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    text-align: center;
}

.btn a{
    display: inline-block;
    background: #efd9ca;
    padding: 10px;
    text-decoration: none;
    font-size: 90%;
    font-weight: 700;
    border-radius: 5px;
}

In here, border-radius works well to the button box. However, when I put border-radius to .btn class it does not work. Whats' the reason behind it?

Thank you!!

Answer 1

 .btn { position: absolute; right: 10px; bottom: 10px; text-align: center; padding:0; background-color: transparent; border:none; }.btn a{ display: inline-block; background: #efd9ca; padding: 10px; text-decoration: none; font-size: 90%; font-weight: 700; border-radius: 10px; transition: all.5s; }.btn a:hover{ background-color: #Ff5678; color:white; }

 <button class="btn"><a>My button</a></button>

Answer 2

I think border-radius is override from button box so if you want to use border-radius from .btn class then you need to write !important like below:

border-radius:10px !important

try this it works for you.