閉じる

CSSの角丸設定(border-radius)

以前は、画像で表現していた角丸がCSSで実装できるようになりました。

2016年1月現在、ほとんどのブラウザが対応しています。

角丸は、CSSのborder-radiusは使用します。

角丸の設定の仕方

border-radius:~px;

の一行を記載します。

試しに、
border-radius:8px;
を設定します。

サンプル

次にかなり丸めのborder-radius:45px;
を設定します。

サンプル

 

上だけなど、一角(一部分)だけ角丸にする場合

上だけや左下だけなど、一角(一部分)だけ角丸に設定する事ができます。

右上のみ角丸

border-top-right-radius : 17px;

右上のみ角丸サンプル

左上のみ角丸

border-top-right-radius : 17px;

左上のみ角丸サンプル

右下のみ角丸

border-top-right-radius : 17px;

右下のみ角丸サンプル

左下のみ角丸

border-bottom-right-radius : 17px;

左下のみ角丸サンプル

ピックアップ記事

  1. ahrefs
    SEOツール 「ahrefs(エイチレフス)」とは?ahrefs(エイチレフス)は、日本でも有名…
  2. reCAPTCHA
    ホームページを公開すると設置したメールフォームに海外からスパム投稿され大量の迷惑メールが届くことがあ…
  3. ビデオ会議で便利なのがWeb会議サービスです。無料で利用できるサービスもいくつかあります。「Skyp…
ページ上部へ戻る