伝統的なフィレット生成スキーム、背景パターンとして複数の画像を使用しなければなりません。CSS3は、我々は、もはやこれらの写真を作るために時間を無駄にしていることを思わない、とだけ国境半径のプロパティを必要とする、ブラウザサポートIE 9、オペラ10.5、サファリ5、クローム4とFirefox 4。
1境界半径特性
国境半径（「国境の半径」を意味する）：CSS3は、単純にプロパティを設定丸め。このプロパティの値を指定して、あなたは、同時に最大4つの角丸の半径を設定することができます。EM、PX、パーセンテージなど：すべての正当なCSSのメトリクスを使用することができます。例えば、以下は、ブロックDIV（幅と高さ200pxの、濃い緑色の背景、2ピクセル灰色実線の境界線）は次の通りであります：
図1に示される効果を達成します。
図1箱オリジナルのスタイル
今CSSの境界半径を増加させるために、その丸い角の50％に設定します。次のように50％、CSSコードがあります：
各フィレットの「水平半径」と「垂直半径」は50％に設定されている間、ここで属性値を設定することで最終ラウンドを達成するために、即ち、50％をフィレット。図2：
図2は、角部の50％に設定されているボックスのように丸くなっています
それは同時に、1-4境界半径の値を設定することができます。あなたが4角を丸め、この値を使用して表す値を設定した場合（当社従来マージンとパディングを考えてみて）。左右の角を使用して、2つの値は、最初の値、右上及び第2の値を使用して、左下を示す場合。三つの値場合、第2の値を使用して、左上、右上と左下を用いて第1の値は、第3の値は、右下隅を使用します。もし四つの値、ひいては、右上、右下、左下（時計回り順）の左上隅に対応します。
今、私たちは2国境半径の値にボーダー-radiusプロパティをボックスに来る：その実施の効果を見てみましょう、は50px 25ピクセル以下のように、CSSのコードは次のとおりです。
丸い角の実現、及び25ピクセルの右下のコーナー半径は50px、右上と左下隅の半径ボックスの左上隅。図3：
図3は、境界半径ボックスの2つの値の集合であります
再来为box的border-radius属性设置三个值border-radius: 50px 10px 25px，来看看它的实现效果，CSS代码如下：
实现的圆角效果，将box的左上角的圆角半径设为50px，右上角和左下角的圆角半径设为10px，右下角圆角半径设为25px。如图4所示：
图4 为box的border-radius设置三个值
最后我们为box的border-radius属性设置四个值border-radius: 50px 10px 25px 0，来看看它的实现效果，CSS代码如下：
实现的圆角效果，将box的左上角的圆角半径设为50px，右上角的圆角半径设为10px，左下角的圆角半径设为25px，右下角圆角半径设为0。如图5所示：
图5 为box的border-radius设置四个值
2 单个圆角的设置
除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：
（1）border-top-left-radius
（2）border-top-right-radius
（3）border-bottom-right-radius
（4）border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。
现在，我们为单独为box的左上角设定50px的圆角，来看看它的实现效果，CSS代码如下：
实现的圆角效果，将box的左上角的圆角半径设为50px。如图6所示：
图6 为box设置左上角的圆角
虽然各大浏览器都支持border-radius，但是在某些细节上，实现都不一样。当四个角的颜色、宽度、风格（实线框、虚线框等）、单位都相同时，所有浏览器的渲染结果基本一致；一旦四个角的设置不相同，就会出现很大的差异。另外，并非所有浏览器，都支持将圆角半径设为一个百分比值。
最も安全なアプローチは、各フィレットの境界線のスタイルと幅にあるため、同じ値に設定し、パーセント値の使用を避けるています。