HOME ＞ CSS ＞【CSS】コピペOK！上だけ角丸などborder-radiusを使った角丸サンプル集

【CSS】コピペOK！上だけ角丸などborder-radiusを使った角丸サンプル集

2022.06.02

CSSのborder-radiusで一部だけ角丸にするケースをまとめました。特に「上だけ角丸」はタブとしてよく使います。

1. 角丸のサンプル
2. 【ざっくり解説】角丸の指定方法
- 2-1. まとめて書く場合は左上から開始（コの字順）
- 2-2. 個別指定の書き方
3. まとめ

角丸のサンプル

4つすべて角丸

コードを見る

<p class="tab-all">4つすべて角丸</p>

.tab-all {
  /* 基本のスタイル */
  width: 280px;
  padding: 15px 0;
  background-color: #21be78;
  font-size: 14px;
  color: #fff;
  text-align: center;

  /* 角丸のスタイル */
  border-radius: 8px;
}

上だけ角丸

コードを見る

<p class="tab-top">上だけ角丸</p>

.tab-top {
  /* 基本のスタイル */
  width: 280px;
  padding: 15px 0;
  background-color: #21be78;
  font-size: 14px;
  color: #fff;
  text-align: center;

  /* 角丸のスタイル */
  border-radius: 8px 8px 0 0;
}

下だけ角丸

コードを見る

<p class="tab-bottom">下だけ角丸</p>

.tab-bottom {
  /* 基本のスタイル */
  width: 280px;
  padding: 15px 0;
  background-color: #21be78;
  font-size: 14px;
  color: #fff;
  text-align: center;

  /* 角丸のスタイル */
  border-radius: 0 0 8px 8px;
}

右だけ角丸

コードを見る

<p class="tab-right">右だけ角丸</p>

.tab-right {
  /* 基本のスタイル */
  width: 280px;
  padding: 15px 0;
  background-color: #21be78;
  font-size: 14px;
  color: #fff;
  text-align: center;

  /* 角丸のスタイル */
  border-radius: 0 8px 8px 0;
}

左だけ角丸

コードを見る

<p class="tab-left">左だけ角丸</p>

.tab-left {
  /* 基本のスタイル */
  width: 280px;
  padding: 15px 0;
  background-color: #21be78;
  font-size: 14px;
  color: #fff;
  text-align: center;

  /* 角丸のスタイル */
  border-radius: 8px 0 0 8px;
}

1つだけ角丸（左上）

コードを見る

<p class="tab-top-left">1つだけ角丸（左上）</p>

.tab-top-left {
  /* 基本のスタイル */
  width: 280px;
  padding: 15px 0;
  background-color: #21be78;
  font-size: 14px;
  color: #fff;
  text-align: center;

  /* 角丸のスタイル */
  border-radius: 8px 0 0 0;

  /* 個別で指定する場合の書き方 */
  border-top-left-radius : 8px;
}

1つだけ角丸（右上）

コードを見る

<p class="tab-top-right">1つだけ角丸（右上）</p>

.tab-top-right {
  /* 基本のスタイル */
  width: 280px;
  padding: 15px 0;
  background-color: #21be78;
  font-size: 14px;
  color: #fff;
  text-align: center;

  /* 角丸のスタイル */
  border-radius: 0 8px 0 0;

  /* 個別で指定する場合の書き方 */
  border-top-right-radius : 8px;
}

1つだけ角丸（右下）

コードを見る

<p class="tab-bottom-right">1つだけ角丸（右下）</p>

.tab-bottom-right {
  /* 基本のスタイル */
  width: 280px;
  padding: 15px 0;
  background-color: #21be78;
  font-size: 14px;
  color: #fff;
  text-align: center;

  /* 角丸のスタイル */
  border-radius: 0 0 8px 0;

  /* 個別で指定する場合の書き方 */
  border-bottom-right-radius : 8px;
}

1つだけ角丸（左下）

コードを見る

<p class="tab-bottom-left">1つだけ角丸（左下）</p>

.tab-bottom-left {
  /* 基本のスタイル */
  width: 280px;
  padding: 15px 0;
  background-color: #21be78;
  font-size: 14px;
  color: #fff;
  text-align: center;

  /* 角丸のスタイル */
  border-radius: 0 0 0 8px;

  /* 個別で指定する場合の書き方 */
  border-bottom-left-radius : 8px;
}

【ざっくり解説】角丸の指定方法

まとめて書く場合は左上から開始（コの字順）

サンプルのように角を4つまとめて記述する場合、その順番は「コの字」順になります。「左上 → 右上 → 右下 → 左下」の順番。

.tab-top {
  /* 左上8px 右上8px 右下0 左下0  */
  border-radius: 8px 8px 0 0;
}

marginなどのまとめた書き方の順番は「上→右→下→左」なので混同しがちですが、border-radiusは「辺」ではなく「角」に対するものなので少し違っています。とにかく左上からスタートしてコの字と覚えておけばOK。

個別指定の書き方

「1つだけ角丸」のサンプルの中にも書きましたが、4つ数値をまとめて書く方法ではなく個別に指定する書き方もあります。この場合は「border-radius」ではなく、下記のような個別のプロパティ名になります。

/* 1つだけ角丸（左上） */
border-top-left-radius : 8px;

/* 1つだけ角丸（右上） */
border-top-right-radius : 8px;

/* 1つだけ角丸（右下） */
border-bottom-right-radius : 8px;

/* 1つだけ角丸（左下） */
border-bottom-left-radius : 8px;

長いプロパティ名ですが、よく見ると「border」と「radius」の間に位置情報（top、leftなど）をハイフンでつなげている、というそのまんまな構成です。