How to understand the way border-radius work-CodePudding

I have an input that nested within a span element so I can put a dollar sign in front of it, then I try to use border-radius to round its 4 corners. I did it but I don't understand how and why it works that way.

here are some scenario I tried:

*Only class bill has border-radius: right corners are not rounded, left ones is. *With both border-radius: 4 corners are rounded. *Only element input has border-radius: nothing is rouned.

Please tell me why it's happened and is there any better way than my code?

HTML

<p>Bill</p>
    <label class="bill">
         <span>$<input type="number" placeholder="0" /></span>
    </label>

CSS

.bill {
  background-color: red;
  border-radius: 7px;
  overflow: hidden;
}

input {
  background-color: red;
  border-radius: 7px;
  border: none;
  text-align: end;
}

CodePudding user response：

Check this -

Html

 <p>Bill</p>
    <label class="bill">
      <span class="prefix">$</span>
      <input type="number" placeholder="0" />
    </label>

CSS -

.bill {
        display: block;
        background-color: red;
        border-radius: 7px;
        overflow: hidden;
        width: fit-content;
      }

      input {
        background-color: red;
        border: none;
        text-align: end;
        height: 40px;
      }
      input:focus {
        outline: none;
      }

Working example here