how to make rounded inner rectangle for button using css?

Question

is there a way in making the inner rectangle rounded using 4px border-radius? rounded corners start when a value greater than 4px is set but I am under constraint to have it 4px.

Is this possible or I should demand the constraint be amended?

https://codepen.io/jicking/pen/WNRvjpZ

 div { background-color: black; display: inline-block; }.btn { width: 82px; height: 32px; color: #0d4773; background: #ffffff; box-shadow: 0 0 0 2px #0c6699; background-clip: padding-box; border: 4px solid transparent; border-radius: 4px; }

 <div> <button class="btn">test</button> </div>

Answer 1

Possibly no way to round up the inner rectangle because it's inside border. The work-around is to add a span that wraps around the button:

 body { padding: 20px; background-color: #333333; }.btn { width: 82px; height: 32px; color: #0d4773; background: #ffffff; box-shadow: 0 0 0 2px #0c6699; /*background-clip: padding-box;*/ border: 4px solid transparent; /*set to 5px + for inner rect rounded*/ border-radius: 4px; }.btn-outer { border-radius: 4px; border: 4px solid blue; display: inline-block; box-shadow: 0 0 0 2px #0c6699; }

 <span class="btn-outer"> <button class="btn">test</button> </span>

Result:

Answer 2

Using pseudoelement :before :

 body {background-color:#000; margin:40px;}.btn { background-color:#fff; width: 82px; height: 32px; color: #0d4773; background: #ffffff; border: 0px solid transparent; border-radius:4px; position:relative; }.btn:before { content:''; width:94px; height:44px; border-radius:8px; display:block; border: 4px solid #0c6699; top:-10px; left:-10px; position:absolute; }

 <button class="btn"> test </button>