web屋の備忘録

ホームページ制作、webマーケティング、技術資料など

*

画像の内側に枠線をつける

   

画像の内側に角丸の枠線をつけるcssです。
 
ポイントは、「box-sizing: border-box;」を入れることです。
これがないと、普通にボーダーをつけても、
一部枠線が表示されなくなってしまいます。
 
枠線の1ピクセル分がはみ出てしまうからです。
 
このように box-sizing に border-box を指定しておくことで、
指定した width の通りに要素を表示してくれるようになります。

img.s-shot {
    border: 1px solid #EEE;
    border-radius: 5px;
    box-sizing: border-box;
}

 - HTML・CSS