【CSS】『border-radius』を使ってみた。

こんにちは、Daniel (@daniel__blog) です。

CSSには『border-radius』というプロパティがあります。

このプロパティを使ってみたので、メモを残します。

Daniel
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デザインライフをお楽しみください。

コメントを残す

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