こんにちは、Daniel (@daniel__blog) です。
CSSには『border-radius』というプロパティがあります。
このプロパティを使ってみたので、メモを残します。
Daniel
自己紹介：
この記事を書いている僕は、主にWordpressをカスタマイズするときに、HTMLとCSSをいじったりしています。
まだまだ初心者ですが、アウトプットしながら日々学んでいます。
『border-radius』を使ってみた。
主に、要素の角を丸くしたり、楕円形にしたりする場合に使います。
基本的な使い方
「垂直方向」と「水平方向」の値を組み合わせて指定します。
書式
border-radius: ＜垂直方向の値＞ / ＜水平方向の値＞;
また、＜垂直方向の値＞と＜水平方向の値＞内では、角の位置それぞれを下記の順番で指定します。
border-radius: ＜左上＞ ＜右上＞ ＜右下＞ ＜左下＞ / ＜左上＞ ＜右上＞ ＜右下＞ ＜左下＞;
使える単位
使用できる単位は下記のとおりです。
- px
- em
- pt
/（スラッシュ）以降は省略可能
省略が可能です。省略した場合は垂直、水平ともに同じ値として扱われます。
具体例①
See the Pen
border-radius-test01 by daniel__blog (@daniel__blog)
on CodePen.
具体例②
See the Pen
border-radius-test02 by daniel__blog (@daniel__blog)
on CodePen.
まとめ
ということでこの記事では、
CSSプロパティ『border-radius』の書式や具体例
をご紹介しました！
たくさん使って有効活用してみたいと思います。
今回は以上です！
最後までお読み頂き、ありがとうございました。
素敵なWebデザインライフをお楽しみください。
