CSSで簡単にできる！ボタンや画像を丸くするborder-radiusの使い方

近年、Webサイトのデザインはますます進化し、ユーザーにとって見やすく、使いやすいデザインが求められています。そんな中、border-radiusは、Web要素の境界線に丸みをつけ、角を丸くするCSSプロパティです。ボタンや画像を丸くすることで、柔らかく、親しみやすく、洗練された印象を与えることができます。
今回は、border-radiusの基本的な使い方から、円形にする方法までを詳しく解説します。border-radiusをマスターして、ワンランク上のWebデザインを実現しましょう！

border-radiusとは？

border-radiusは、Web要素の境界線に丸みをつけ、角を丸くするCSSプロパティです。pxや%などの単位で値を指定することで、丸みの大きさを調整することができます。

border-radiusの書き方

border-radiusの書き方は、以下の通りです。

border-radius: 値;

値には、以下のいずれかを指定することができます。

• px: ピクセル単位で丸みの大きさを指定します。
• %: 要素の幅または高さの割合で丸みの大きさを指定します。
• keyword: いくつかの既定の丸み値を指定します。

/* 要素のすべての角を10px丸くする */
.element {
  border-radius: 10px;
}

/* 上部の角を5px丸くし、その他の角は丸くしない */
.element {
  border-radius: 5px 0 0 5px;
}

border-radiusで円を作る

border-radiusを使って円を作るには、要素の幅と高さを同じに設定し、丸みの値を要素の幅または高さの半分に設定します。

.circle {
  width: 100px; /* 要素の幅を100pxに設定 */
  height: 100px; /* 要素の高さを100pxに設定 */
  border-radius: 50%; /* 丸みの値を要素の幅または高さの半分に設定 */
}

border-radiusで長円形を作成する

border-radiusを使って長円形を作るには、長方形にborder-radiusを9999pxに指定すると作成可能です。ボタンデザインでよく使われる図形です。

.element {
  border-radius: 9999px;
}

まとめ

border-radiusは、Webサイトのデザインをワンランクアップさせるのに欠かせないCSSプロパティです。今回紹介した内容を参考に、border-radiusを上手に活用して、魅力的なWebサイトを作ってみてください。