CSS3 角丸をつける
今回は、CSS3で枠線に角丸をつける方法について書きます。
角丸をつけるには「border-radius」というものを使います。
このように使います。
border-radius: 20px;
「ピクセル」で指定する以外に、「%」で指定する方法もあります。
border-radius: 50%;
具体的な使い方を書いています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> div { width: 200px; height: 200px; background-color: green; border: 5px solid red; border-radius: 20px; } </style> </head> <body> <div id="maru">角丸</div> </body> </html>
実行結果
ちなみに、「border-radius: 50%;」とすると円になります。
さらに、「background-image」を指定すると、背景に画像を切り抜く事ができます。
width: 200px;
height: 200px;
background-color: green;
border: 5px solid red;
border-radius: 50%;
background-image: url('photo.jpg');
ここからは、もう少し詳しく「border-radius」について書きます。
「border-radius」は、それぞれの角を別々に指定することができます。
border-radius: 100px 25px 50px 50px ;
左上から時計回りに指定できます。(左上100px,右上25px,右下50px,左下50px)
「border-top-left-radius(左上)」,「border-top-right-radius(右上)」,「border-bottom-left-radius(左下)」,「border-bottom-right-radius(右下)」と指定すると、個別に角度をいじれます。
width: 200px; height: 200px; background-color: green; border: 5px solid red; border-top-left-radius: 50px;
参考サイト
border-radius-CSS3リファレンス