From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/border-top-left-radius/index.html | 170 +++++++++++++++++++++ 1 file changed, 170 insertions(+) create mode 100644 files/ja/web/css/border-top-left-radius/index.html (limited to 'files/ja/web/css/border-top-left-radius') diff --git a/files/ja/web/css/border-top-left-radius/index.html b/files/ja/web/css/border-top-left-radius/index.html new file mode 100644 index 0000000000..0fd505b09b --- /dev/null +++ b/files/ja/web/css/border-top-left-radius/index.html @@ -0,0 +1,170 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - border-radius + - リファレンス +translation_of: Web/CSS/border-top-left-radius +--- +
{{CSSRef}}
+ +

CSS の border-top-left-radius プロパティは、要素の左上の角を丸めます。

+ +
{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}
+ + + +

丸みは円又は楕円にすることができ、値のうちの一つが 0 であれば、丸めは行われずに角は四角くなります。

+ +
border-radius.png
+ +

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。

+ +
このプロパティの値が border-top-left-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
+ +

構文

+ +
/* 角を円にする */
+/* border-top-left-radius: radius */
+border-top-left-radius: 3px;
+
+/* 角を楕円にする */
+/* border-top-left-radius: horizontal vertical */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+
+ +

値１つで指定する場合:

+ + + +

値２つで指定する場合:

+ + + +

値

+ +
+
<length-percentage>
+
円の半径又は楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ライブ例コード
+
 
+ 		境界として使用されている円弧 + 
+div {
+  border-top-left-radius: 40px 40px;
+}
+
+
+
 
+ 		境界として使用されている楕円の弧 + 
+div {
+  border-top-left-radius: 40px 20px;
+}
+
+
+
 
+ 		ボックスは正方形。境界として使用されている円弧 + 
+div {
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		ボックスは正方形ではない。境界として使用されている楕円の弧 + 
+div {
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		背景色は境界で切り取られる + 
+div {
+  border-top-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.border-top-left-radius")}}

+ +

関連情報

+ +

CSS の border-radius に関するプロパティ: 一括指定の {{cssxref("border-radius")}}, 他の角のための {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}

-- cgit v1.2.3-54-g00ecf