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

border-top-left-radius:左上の角丸CSS3で追加

記事Sep. 28th,2020
左上の角丸を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 border-top-left-radius: 0;
適用対象 すべての要素
継承 しない
パーセント値 対応するボーダーボックスの寸法に依存

border-bottom-left-radius”プロパティは左上の角丸を指定するプロパティです。

サンプルコード

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

説明
<length> pxemなどで角丸の半径を指定
<percentage> 境界線の外縁の横幅、高さを“100%”として角丸の半径を指定

値の指定方法

角丸の半径はpxemなどで指定した長さ、もしくは境界線の外縁の幅、高さに対するパーセンテージで指定します。指定した値は境界線の外縁の半径になります。

値が一つの場合はその値が水平方向と垂直方向の両方の半径になります。

div { border-top-left-radius: 〚角丸の半径〛;}

半角スペース(“ ”)により区切られた2つの値は1つ目の値が水平方向の半径、2つ目の値が垂直方向の半径になります。

border-top-left-radius: 〚水平方向の半径〛 〚垂直方向の半径〛;
“border-radius:”の値

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

仕様書

Level 1 Level 2 Level 3
勧告(REC) 勧告(REC)
border-top-left-radius
定義なし

定義なし

定義あり

使用例

角丸を指定する

<length>”値で指定する

div { border-top-left-radius: 20px 20px;}
border-top-left-radius: 20px 20px;
div { border-top-left-radius: 20px;}
border-top-left-radius: 20px;

<percentage>”値で指定する

div { border-top-left-radius: 10% 10%;}
border-top-left-radius: 10% 10%;
div { border-top-left-radius: 10%;}
border-top-left-radius: 10%;

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

div { border-top-left-radius: 20px 40px;}
border-top-left-radius: 30px 10px;
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク