閉じる

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. 日本語設定
    Google Search Console(サーチコンソール ※旧WEBマスターツール)内のメニュー…
  2. PHPフレームワークのLaravel(ララベル)のサポート期限とサポートされているPHP バージョン…
  3. キャプチャソフト
    個人でもビジネスでもWindowsやmacのパソコンで画面をキャプチャ、スクリーンショットし…
ページ上部へ戻る