1. Home
  2. CSS3のborder-radiusプロパティ

CSS3のborder-radiusプロパティ2024 年の最新の入門チュートリアル。このコースでは 例,ブラウザのサポート,属性の定義と指示,文法,例1,例2,関連記事, について学習できます。

CSS3のborder-radiusプロパティ

例

丸い枠線を追加するdiv要素：

div
{
border:2px solid;
border-radius:25px;
}

»をお試しください

ブラウザのサポート

表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。

すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。

プロパティ
ボーダーイメージ 4.0 -webkit- 9.0 4.0 -moz- 5.0 -webkit- 10.5 -O-

属性の定義と指示

* - - コンポジット特性の半径特性ボーダー-radiusプロパティは、4つの国境まで指定することができますです

注：このプロパティは、あなたが国境を丸め要素を追加することができます！

デフォルト： 0
継承： いいえ
バージョン： CSS3
JavaScriptシンタックス： オブジェクトobject.style.borderRadiusは= "5pxの"

文法

border-radius:1-4 length|%/1-4 length|%;

注：各半径の4つの値の順序は次のとおりです。左上、右上、右下、左下隅。あなたは左下隅を省略した場合は、右上隅は同じです。 あなたは右下隅を省略した場合は、左上隅は同じです。 あなたは右上隅を省略した場合は、左上隅は同じです。

值 描述
length 定义弯道的形状。
% 使用%定义角落的形状。

例1

国境半径：2EM。

と同等です。

border-top-左半径：2EM。
border-top-右半径：2EM。
border-bottom-右半径：2EM。
border-bottom-左半径：2EM。

例2

国境半径：2EM 1EM 4em / 0.5em 3em;

と同等です。

border-top-左半径：2EM 0.5em;
border-top-右半径：3em 1EM。
border-bottom-右半径：4em 0.5em;
border-bottom-左半径：3em 1EM。

関連記事

CSS3のチュートリアル： CSS3ボーダー

ホットチュートリアル

お問い合わせ

CSS3のborder-radiusプロパティ
10/30