角丸・円を5秒で!!【border-radius】をコピペで実装!!

2016/7/24 CSS

要素を角丸にする場合

CSS3でのBOXを角丸にする方法のメモ。CSSのborder-radiusをつかって角丸を実装します。

CSS

これだけでdivが角丸になります。

四つ角の一部分だけ角丸にしたい場合

例えば要素の右上と左上だけとか、左下と右下だけを角丸にしたい時があると思います。

CSS

top-leftは左上
top-rightは右上
bottom-leftは左下
bottom-rightは右下
になります。

角丸ではなく円にしたい場合

CSS

border-radius50%にすることで、ボックスの直線がなくなり楕円、または正円になります。

投稿者:気まぐれWEBLOG管理人