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

border-top-right-radius”プロパティ:右上の角丸CSS3で追加

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

プロパティについて

概要

初期値 border-top-right-radius: 0;
適用対象 すべての要素
継承 No
パーセント値 ボーダーボックスのサイズを“100%”とする
計算値 <length-percentage>”値の算出された値の組
アニメーション 計算値

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

サンプルコード

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

説明
<length-percentage>”値
<length> pxemなどで角丸の半径を指定
<percentage> ボーダー・ボックスの横幅、高さを“100%”として角丸の半径を指定
他の値
共通キーワード

値の指定方法

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

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

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

ホワイトスペースにより区切られた2つの値は1つ目の値が水平方向の半径、2つ目の値が垂直方向の半径になります。

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

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

仕様書

定義されている仕様書
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
border-top-right-radius
定義なし

定義なし

定義あり

使用例

角丸を指定する

<length>”値で指定する

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

<percentage>”値で指定する

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

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

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