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;（※四つ角を一度に指定）

 

 

 

END