Webサイトをもっとおしゃれに！CSSで角丸デザインを取り入れる

CSSで角丸を作る

CSSの border-radius プロパティを使って、要素の角を丸くすることができます。これは、ボタン、画像、ボックスなど、さまざまな要素に適用できます。

基本的な使い方

.element {
  border-radius: 10px;
}

上記の例では、すべての角が半径10pxの円弧で丸められます。

四隅個別に設定

四隅それぞれの角丸半径を個別に設定することもできます。その場合は、左上、右上、右下、左下の順に値を指定します。

.element {
  border-radius: 10px 20px 30px 40px;
}

上記の例では、左上が10px、右上が20px、右下が30px、左下が40pxの角丸になります。

楕円形の角丸

border-radius プロパティは、2つの値を指定することで、楕円形の角丸を作ることができます。

.element {
  border-radius: 10px 20px / 5px 10px;
}

上記の例では、横方向の半径は10px、縦方向の半径は20px、横方向の楕円率は5px、縦方向の楕円率は10pxの角丸になります。

ブラウザ互換性

border-radius プロパティは、すべての主要なブラウザでサポートされています。ただし、古いブラウザではサポートされていない場合があります。

<div class="element"></div>

.element {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 10px;
}

<div class="element"></div>

.element {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 10px 20px 30px 40px;
}

<div class="element"></div>

.element {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 10px 20px / 5px 10px;
}

ボタン

<button class="button">ボタン</button>

.button {
  width: 100px;
  height: 50px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 5px;
}

画像

<img src="image.jpg" class="image">

.image {
  width: 200px;
  height: 200px;
  border-radius: 10px;
}

ボックス

<div class="box"></div>

.box {
  width: 300px;
  height: 200px;
  background-color: #ccc;
  border: 1px solid #ddd;
  border-radius: 10px;
}

border-image プロパティ

border-image プロパティを使って、角丸の画像を指定することができます。

.element {
  border-image: url(image.png) 10 repeat;
}

上記の例では、image.png という画像を角丸の画像として指定しています。10 は画像の繰り返し回数、repeat は画像の繰り返し方を指定しています。

::before 疑似要素

::before 疑似要素を使って、角丸の背景を生成することができます。

.element {
  position: relative;
  
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    border-radius: 10px;
  }
}

上記の例では、::before 疑似要素を使って、角丸の背景を生成しています。content: "" は、疑似要素内に何も表示しないことを指定しています。

SVG

SVGを使って、角丸の形状を定義することができます。

<svg viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" rx="10" />
</svg>

上記の例では、rx="10" で角丸の半径を指定しています。

ライブラリ

角丸を作るためのCSSライブラリもいくつかあります。

これらのライブラリを使うと、より簡単に複雑な角丸を作ることができます。