JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

CSSの基本 ~ ボックスの角を丸めたい ~

~ ボックスの角を丸めたい ~

ボーダーの角を一律同じ径で丸くするには「border-radius」を指定します。四隅をそれぞれ別々の径で指定したい場合は「border-top-left-radius」「border-top-right-radius」「border-bottom-left-radius」「border-bottom-right-radius」を指定します。

サンプル

① border-radius:30px                               ※四つ角を同一で指定
② border-top-left-radius:10px                   ※左上の角を指定
③ border-top-right-radius:40px                 ※右上の角を指定
④ border-bottom-left-radius:35px             ※左下の角を指定
⑤ border-bottom-right-radius:80px           ※右下の角を指定
⑥ border-radius:20px 25px 30px 35px     ※四つ角を一度に指定

結果

① border-radius:30px;(※四つ角を同一径で指定)

 

② border-top-left-radius:10px;(※左上の角を指定)

 

③ border-top-right-radius:40px;(※右上の角を指定)

 

④ border-bottom-left-radius:35px;(※左下の角を指定)

 

⑤ border-bottom-right-radius:80px;(※右下の角を指定)

 

⑥ border-radius:20px 25px 30px 35px;(※四つ角を一度に指定)