border-radiusでborderの内側にも丸みをつけたい

Question

border-radiusを使って丸みをつけたボタンを作成しています。

https://i.gyazo.com/c4d1ba9a771aa153cdc40de1d8c580f1.png

こんなかんじでborderの内側も丸みをつけた感じにしたいのですが、
通常どおりborder-radiusをつけると外側しか丸みが付かず、内側は角ばったものになってしまいます。

内側にも丸みをつけるために子要素をつくりそれにもborder-radiusをつけてやろうとしてもうまくいきませんでした。
丸い線を書くような感じになるにはどのようにすればいいでしょうか？

// WEBで予約
        .web-reserve {
          width: 230px;
          height: 60px;
          border-radius: 3px;
          // background-color: #f13529;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          border: 2.7px solid white;
          overflow: hidden;
        }

        .web-reserve-button {
          width: 230px;
          height: 60px;
          border-radius: 3px;
          background-color: #f13529;
          display: flex;
          justify-content: center;
          align-items: center;
        }

Answer 1

​border-radius: 3pxでborder: 2.7px solid whiteなので、内側に丸まる余地が0.3pxしかなく、ほとんど角に見えているのだと思います。
当方の環境では、ボーダー幅を2.3pxにして目いっぱい拡大したところ、わずかに丸みを確認できました。

Comments

[morioka1206]

ありがとうございます。
もしかしたらと思い、僕もborder-radiusを4pxにしたら丸みが出たのでそういうことなんだと理解しました。

[sousuke]

ちょっと脇道にそれるんですけど、小数点のpxって描画できるんですか？
おっさんなもんで小数点のpxってイメージがつかない…

[Lhankor_Mhy]

「サブピクセル CSS」でググるといいかもしれないです。
あと、絶対私の方がおっさんです。

[sousuke]

ありがとうございます！めっちゃググります笑

Answer 2

自身のコメント欄と入力したつもりが回答欄に入力してました、失礼。

Answer 3

もっといいやり方ありそうですけど(疑似要素使ってdivの数減らせるとか)
htmlはそのままで
親のdiv側の背景を線に見立てる方法で実装してみました。
border色が白なので適当に背景色付けて確認してみてください。
内と外でborder-radiusの値をズラすとそれっぽくなりますね。

.web-reserve {
  border-radius: 7px;
  background-color: white;
  padding: 3px;
  overflow: hidden;
}

.web-reserve-button {
  color: white;
  border-radius: 5px;
  width: 230px;
  height: 60px;
  background-color: #f13529;
  display: flex;
  justify-content: center;
  align-items: center;
}

サンプル(わかりやすくするために、背景色付けたり中央寄せしたり余計な指定入っちゃってます。
https://codepen.io/recal/pen/zYEEgRO

Comments

[recal]

あれごめんなさい、リロードしてなかったから回答0に見えてて回答してしまいました(しかも的外れ)、
矩形に見えていたのは目の錯覚だったんですね！勉強になりました。