【CSS】ボックスや画像のカドを丸くする

公開日: : 最終更新日:2016/03/24 css

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;
}

表示例



関連記事

no image

インラインCSSの記述で画像を回転させる方法

画像を回転させたいときに使用。ブログなどで外部CSSを使用するのが面倒な時に便利。 html内に下記...

記事を読む

【CSS】印刷時のみ有効となる設定にする

CSSを使って、印刷時のみ有効となる設定をします。これを使用すれば、わざわざ印刷専用のページを作らな...

記事を読む

画像をマウスオーバー時に半透明にする

画像をマウスオーバー時に半透明にする

cssで画像をマウスオーバー時に半透明にする a:hover時のimgに対してcssで指定します。 ...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

no image
結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方  受付でお祝いの言葉を述べ、祝儀

no image
結婚祝い

お祝い品選びと費用 お祝い品の選び方  新居を構える二人には、生活

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑