border-radius
HTML5のセクショニング要素や、Div等ボックス要素の４つのコーナーの角丸を指定できます。
また、それぞれのコーナーを別に指定することもでき、 border-上下‐左右‐radius：ピクセル；を指定します。
左上（border-top-left-radius）、右上（border-top-right-radius）、右下（border-bottom-left-radius）、
左下（border-bottom-right-radius）のように記述して、丸くする弧の角度をピクセル数値で指定します。
また、上記の拡張子で紹介したように、UAの対応として、それぞれの拡張子の記述もします。
（UAの拡張子ごとに、多少記述が変わるので上記を参考にしてください。）
角丸記述の例
■ 画像をボーダー（枠線に）表示 ■
CSSの記述
div { width:480px; height:360px; background:#ffff00; padding:25px; margin:auto;
border-radius: 30px; /* 通常 のCSS３角丸指定の記述(4角を指定)*/
-webkit-border-radius: 30px; /* webkitを使っているChrome/Safari等用 */
-moz-border-radius: 30px; /* firefox用 */
-o-border-radius: 30px; /* Opera用 */
-ms-border-radius: 30px; /* IE用 */ }
HTML記述
<div><h1>このエリアの角が丸くなります。</h1></div>
57 上記角丸図形完成図
■ 画像の枠 ■
border-image
色々な要素に適応するボーダーを画像で指定できます。
1) 画像ファイルの指定(border-image-source)、
２） 画像の使用範囲を左上から決める(border-image-slice)、
３） ボーダーの太さ(border-image-width)、
４） ボーダーエリアをボックスの外へ広げるとき(border-image-outset)、
５） 繰り返しのスタイルを値に入れる(border-image-repeat)。
（値の種類repeat＝画像の繰り返し stretch=ボックスの幅に画像が繰り返さず拡大する（引き伸ばし）。
round＝repeatのように繰り返すが、整列しないで画像が途中で切れないように、拡大して整列する。）
実際の記述の際には、下記の内容のプロパティ―を値のみ一括で記述します。
border-image :url("イメージ画像パス") border-image-slice:上右下左のpx;
border-image-outset:ホックス範囲外へ広げるサイズpx;
border-image-repeat:繰り返しのスタイル;
＊別々にプロパティ―と値を記述しても表示がうまくいかないブラウザがあります。
記述の例
border-image: url(sample.jpg) 78 192 98 171 repeat;
border-image-width:太さのpx; で、枠線の太さだけは別途記述します。
58 UAの拡張子で画像を指定する場合。
border-image: url("画像パス");
-moz-border-image: url("画像パス");
-webkit-border-image: url("画像パス");
-o-border-image: url("画像パス");
-ms-border-image: url("画像パス");
Border-imageの記述や、スライスの値上下左右の設定が判りにくいので、
イメージを利用して、ボーダーイメージジェネレーターで練習してみましょう。
http://border-image.com
サイトで作成したサンプルをHTMLに張り付けて、実際のdivなどで反映してみてください。
現状では、表示エリアのボーダー枠内も同じ画像の背景になってしまうと思います。
■ ボーダー（枠の変形） ■
transform:ボーダーで囲んだエリアを２D・３Dの形で変形させることができるようになった要素です。
transformの要素に対して、属性で変形を指定します。
属性の種類
translate 位置を指定して移動させる属性 X軸（）Y軸（）の数値で移動します。
単一方向の指定もできます。
例：transform: translate(50px,10px);
scale エリアの拡大縮小を X軸（）Y軸（）の数値で設定します。単一方向の指定もできます。
例：transform: scale(0.9,1.2); 各軸に対し、１を堺に拡大縮小。
「, 」で区切って３つめの値を入れると３D方向への拡大縮小もできる。
rotate エリアの回転を X軸（）Y軸（）の数値で設定します。単一方向の指定もできます。
例：transform: rotate(5deg); 角度の値はpxではなくdeg。
skew エリアの傾斜を X軸（）Y軸（）の数値で設定します。単一方向の指定もできます。
例：transform: skew(30deg,0deg); 角度の値はpxではなくdeg。
59
■ ボーダー（枠の変形２） ■ background-clip
:画像を枠の背景に指定する時の範囲を指定できる。
属性の種類
border-box
：
ボーダーを含む範囲を画像で埋める。
padding-box
：
ボーダー外周からpaddingを計算し、
その内側の範囲を画像で埋める。
content-box
：
文章エリア等コンテンツの範囲のみ画像で埋める。