このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

border-radius:角丸CSS3で追加

記事Aug. 29th,2018
July 7th,2020
角丸を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 border-top-left-radius: 0
border-top-right-radius: 0
border-bottom-right-radius: 0
border-bottom-left-radius: 0
適用対象 すべての要素
継承 不可
定義 CSS Backgrounds and Borders Module

border-radius”は4つの角丸をまとめて指定するプロパティです。

サンプルコード

div { border-radius: 20px / 20px;}

説明
inherit 親要素のプロパティ値を継承する
<length> px”、“em”などで半径の長さを指定
<percentage> ボーダーボックスの幅、高さに対する割合で半径を指定

値の指定方法

px”、“em”などで指定した長さかボーダーボックスの幅、高さに対するパーセンテージで角丸の半径を指定します。
指定した値はボーダーボックス(ボーダーの外側の輪郭)の半径になります。

div { border-radius: 〚角丸の半径〛;}
“border-radius:”の値

0”の場合は丸くない角になります。

スラッシュ(“/”)により区切られた2つの値は、“/”の前が水平方向の半径、“/”の後は垂直方向の半径になります。
/”が省略された場合は値が水平方向と垂直方向の両方の半径になります。

border-radius: 〚水平方向の半径〛 / 〚垂直方向の半径〛;

また、1、2、3、4つの数値を値として指定することができます。

  • 1つの場合は4つの角すべてにその値が適用されます。
  • 2つの場合は1つ目の値が左上と右下、2つ目の値が右上と左下の角に適用されます。
  • 3つの場合は1つ目の値が左上と右下、2つ目の値が右上と左下、3つ目の値が右下の角に適用されます。
  • 4つの場合は1つ目の値が左上、2つ目の値が右上、3つ目の値が右下、4つ目の値が左下の角に適用されます。
border-radius: 〚すべての角〛;
border-radius: 〚左上と右下〛 〚右上と左下〛;
border-radius: 〚左上〛 〚右上と左下〛 〚右下〛;
border-radius: 〚左上〛 〚右上〛 〚右下〛 〚左下〛;

スラッシュ(“/”)で区切って2セットの値を記述すると1セット目が水平方向の半径、2セット目が垂直方向の半径を指定します。数値を記述する順番は1セットのみ記述するときと同じです。

border-radius: 〚左上と右下の水平方向の半径〛 〚右上と左下の水平方向の半径〛 / 〚左上と右下の垂直方向の半径〛 〚右上と左下の垂直方向の半径〛;

使用例

角丸を指定する

長さで指定する

div {
height: 50px;
border: 5px solid rgb(255,0,0);
border-radius: 20px / 20px;
}
border-radius: 20px / 20px;
div {
height: 50px;
border: 5px solid rgb(0,255,0);
border-radius: 20px 20px 20px 20px;
}
border-radius: 20px 20px 20px 20px;
div {
height: 50px;
border: 5px solid rgb(0,0,255);
border-radius: 20px;
}
border-radius: 20px;

パーセンテージで指定する

div {
height: 50px;
border: 5px solid rgb(255,255,0);
border-radius: 10% / 10%;
}
border-radius: 10% / 10%;
div {
height: 50px;
border: 5px solid rgb(255,0,255);
border-radius: 10%;
}
border-radius: 10%;

水平方向と垂直方向の半径をそれぞれ指定する

div {
height: 50px;
border: 5px solid rgb(0,255,255);
border-radius: 30px / 10px;
}
border-radius: 30px / 10px;

それぞれの角の半径を指定する

div {
height: 50px;
border: 5px solid rgb(255,0,0);
border-radius: 10px 20px 30px 40px;
}
border-radius: 10px 20px 30px 40px;
div {
height: 50px;
border: 5px solid rgb(0,255,0);
border-radius: 10px 40px;
}
border-radius: 10px 40px;
div {
height: 50px;
border: 5px solid rgb(0,0,255);
border-radius: 0px 10px 40px;
}
border-radius: 0px 10px 40px;
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク