線・角

`border-radius` 角を丸くする

重要度4 / 5

意味

四隅を丸くする場合に使います。ボタンやカードでよく使います。値を大きくすると、円に近づきます。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<p>角が丸いラベル</p>

CSS

p {
  border-radius: 999px;
  background: #160076;
  color: #fff;
  padding: 0.6rem 1.2rem;
  display: inline-block;
}

プレビュー

出典: MDN Web Docs（`@mdn/browser-compat-data`）