大阪のホームページ制作会社 株式会社TREVO
技術ブログ

CSSを使ってボックスやボタンの角を丸くする方法

2021.06.16.

CSS

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

昔は要素を角丸するには背景画像を使ったりして表現する必要がありましたが。今ではcssの「border-radius」プロパティを使うことで簡単に設定することができます。
簡単にボックスの角を丸する方法を紹介します。

四つ角を角丸にする

border-radius: 20px;

■HTML


<div class="radius-box">border-radius: 20px</div>

■css


input[type=radio] {
    display: none;
}
.border-radius {
  width: 280px;
  height: 100px;
  line-height: 100px;
  background-color: red;
  border-radius: 20px;
  color: #fff;
  text-align: center;
}

四つ角を異なる角丸にする

border-radius: 10px 20px 30px 40px;

■HTML


<div class="radius-box02">border-radius: 10px 20px 30px 40px;</div>

■css


input[type=radio] {
    display: none;
}
.radius-box02 {
  width: 280px;
  height: 100px;
  line-height: 100px;
  background-color: red;
  border-radius: 10px 20px 30px 40px;
  color: #fff;
  text-align: center;
}

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

twitter Facebook Pocket LINE はてブ