CSSを使ってボックスやボタンの角を丸くする方法
投稿日：2021.06.16.
更新日：2025.04.12.
デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。
3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み：AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条：私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
昔は要素を角丸するには背景画像を使ったりして表現する必要がありましたが。今では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;
}
