border-radius プロパティ
border-radius を使用すると、要素の角を丸くすることができるようになります。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>border-radius プロパティを使用すると、要素の角を丸くすることができるようになります。</div>
</body>
</html>
box-shadow プロパティ
box-shadow は、ボックスに影を付けます。
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
border-image プロパティ
border-image プロパティを使用すれば、ボーダーに画像を使用することができるようになります。
注： Internet Explorer 10 以前のバージョンは、border-image プロパティをサポートしていません。
round（画像の繰返し）
画像は領域を埋めるようにタイル状に（繰返し）並べられる
stretch（画像の引伸ばし）
画像は領域を埋めるように引伸ばされる。
使用した画像
<!DOCTYPE html>
<html>
<head>
<style>
div.border-image{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round{
-webkit-border-image:url(img/border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(img/border.png) 30 30 round; /* Opera 10.5-12.1 */
border-image:urlimg/(border.png) 30 30 round;
}
#stretch{
-webkit-border-image:url(img/border.png) 30 30 stretch; /* Safari 5 */
-o-border-image:url(img/border.png) 30 30 stretch; /* Opera 10.5-12.1 */
border-image:url(img/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<p><strong>注：</strong> Internet Explorer 10 以前のバージョンは、border-image プロパティをサポートしていません。</p>
<h3>round（画像の繰返し）</h3>
<div id="round">画像は領域を埋めるようにタイル状に（繰返し）並べられる</div>
<h3>stretch（画像の引伸ばし）</h3>
<div id="stretch">画像は領域を埋めるように引き伸ばされる。</div>
<p>使用した画像</p>
<img src="img/border.png">
</body>
</html>
border で三角形を作る
コンテンツの各頂点と、ボーダーの各頂点は直線で結ばれるのを利用して、三角形を作ってみます。
（1）10pxのボーダーを持った領域を描画
<style>
#bd10 {
width:80px;
height:80px;
background:#909;
border-width:10px;
border-style:solid;
border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-left-color:yellow;
}
</style>
（2）ボーダーを40pxに広げて行く。
<style>
#bd40 {
width:20px;
height:20px;
background:#909;
border-width:40px;
border-style:solid;
border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-left-color:yellow;
</style>
（3）終にはコンテンツ領域を消してしまう。
4つの三角形が出来上がる。
<style>
#bd50 {
width:0;
height:0;
background:#909;
border-width:50px;
border-style:solid;
border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-left-color:yellow;
}
</style>
（4）必要な三角形を残し不要なものは消します。
<style>
#sankaku{
width:0;
height:0;
border-width:50px;
border-style:solid;
border-top-color:red;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
</style>