かじこの備忘録

border-radius はボックスのカドを丸くするプロパティです。<img>に対しても適用することができ、画像のカドを丸くすることができます。正方形のボックスや画像に 50％ の border-radius をかけると、円形に切り抜くことができます。

正方形のボックスや画像を円形に切り抜く

img{
	border-radius:50%;
}

表示例

カドをpx指定して丸くする

img{
	border-radius: 20px;
}

表示例

カドごとに指定を変えて丸くする

img{
	border-radius:20px 0;
/*border-radius:［左上＆右上］ [右下＆左下]*/
}

表示例

img{
	border-radius:20px 10px 0;
/*border-radius:［左上] [右上＆左下] [右下]*/
}

表示例

img{
	border-radius:30px 20px 10px 0;
/*border-radius:[左上] [右上] [右下] [左下]*/
}

表示例

角丸の縦横比を変えて丸くする

基本、角丸は正円で丸くしますが、楕円形(角丸の縦横比が違う)で丸くすることもできます。
前列が角丸の横半径、後列が角丸の縦半径を指定でき、スラッシュ(/)で区切ります。

img{
	border-radius: 10px 20px 40px 60px / 60px 40px 20px 10px;
/*border-radius:[左上] [右上] [右下] [左下]の順。前列：角丸の横半径/後列：角丸の縦半径*/
}

表示例

別の書き方

数字の羅列じゃ分かりにくいぞ!!という人向きかも。

img{
border-top-left-radius:40px;
border-top-right-radius:30px;
border-bottom-right-radius:20px;
border-bottom-left-radius:10px;
}

表示例

縦横比を変えて指定

img{
border-top-left-radius:60px 30px;
}

表示例