CSSのborder-radiusの使い方

求人
CSSのborder-radiusの使い方

border-radiusを使えば要素の四隅を丸めることができます。

CSSのdivタグで円を描く方法」では四隅を全て50%とすることにより円を描きました。

border-radiusでは、左上、右上、右下、左下という時計周りの順で四隅の丸めをそれぞれ異なる値で指定することが可能です。

四隅を全て10pxにしてみました。

上記のcssです。

左下のみ丸みを0にしてみたら上記の様になりました。

上記のcssです。

border-radiusは以下の4つでも指定する事が可能です。

  • border-top-left-radius: 10px 20px;
  • border-top-right-radius: 10px 20px;
  • border-bottom-right-radius: 10px 20px;
  • border-bottom-left-radius: 10px 20px;

10pxが横、20pxが縦の丸みです。

横10px,縦20px

上記のcssです。

株式会社CONFRAGE

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

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

CAPTCHA