border-radiusが効かない場合の原因と対処法を解説!

CSSの角丸を実現するborder-radiusのプロパティが効かない場合の原因と対処法について解説していきます。

コンテンツ [表示]

  1. 1border-radiusが効かない
  2. 2border-radiusが効かない場合の原因と対処法
  3. 2.1文法エラーで効かない場合
  4. 2.2親要素・子要素の関係の場合
  5. 2.3tableで効かない場合
  6. 2.4Safariのブラウザだけ効かない場合
  7. 2.5その他CSSのスタイルが効かない問題

border-radiusが効かない

CSSのborder-radiusプロパティは角を丸くする、つまり角丸にする際に使うプロパティです。最近のWEBページではアイコンの画像などを円で表示したり、ちょっとした要素を角丸にして見せるというのはよく使われるテクニックです。

しかしborder-radiusプロパティを設定しても効かないといったケースもあります。ここではborder-radiusを設定してもプロパティが効かない場合の原因と対処法について解説していきます。

Photo byPexels

border-radiusが効かない場合の原因と対処法

それではborder-radiusが効かない場合の原因と対処法を紹介していきます。可能性としては複数ありますので、順番に見ていきましょう。

文法エラーで効かない場合

まずはborder-radiusのみならずCSSでよくある文法エラーでスタイルが適用されないという可能性を潰しておきましょう。

下記の記事ではChromeのデベロパーツールでCSSのエラーがあるかを調査する方法を紹介しています。ぜひ参考にしてみて下さい。

ChromeのデベロッパーツールでCSSのエラーを調査する方法!のイメージ
ChromeのデベロッパーツールでCSSのエラーを調査する方法!
CSSのスタイルが効かない場合、文法上のエラーをChromeのデベロッパーツールを開いてすぐに確認することが出来ます。そのやり方を紹介していきます。

CSSの文法上エラーは無いけど、border-radiusが効かないという方は次に進みましょう。

親要素・子要素の関係の場合

border-radiusを親要素に適用した一方で子要素側では適用されないといったケースがあります。例を見てみましょう。

上記の例では.sampleに対してborder-radiusを設定していますが、画像が角丸になりません。

これは親のdiv要素(.sample)は角丸でもその子要素は角丸になっていないためです。この対処にはやり方が2通りあります。

子要素(img要素)にもborder-radiusを設定する

子要素側にも同じ値でborder-radiusを設定しましょう。これで問題なく画像が角丸になります。

overflow: hiddenにする

親要素が角丸の状態でoverflow: hiddenを設定することで、画像自体は角丸ではないですが、表示上角丸に見せることが出来ます。

あわせて読みたい
overflow
CSSのoverflowプロパティは要素の内容がボックスの範囲から溢れる場合に、その見せ方を制御するプロパティです。overflowプロパティの構文や使い方をサンプルコード付きで解説します。

tableで効かない場合

tableタグにborder-radiusを設定しても効かない場合があります。それはborer-collapse: collapseが設定されている場合です。

テーブルで角丸にする方法は下記の記事で紹介していますので、tableborder-radiusが効かないという方は下記の記事を参考にしてみましょう。

CSSで角丸のテーブルを作成する方法を解説!のイメージ
CSSで角丸のテーブルを作成する方法を解説!
CSSで角丸のテーブルを作成する方法をサンプルコード付きで紹介します。角丸は「border-radius」プロパティで実現できますが、テーブルでは角丸にならないケースもあります。テーブルの角丸の仕方をマスターしましょう!

Safariのブラウザだけ効かない場合

Safariのブラウザででborder-radiusプロパティが効かない場合があるようです。その際の回避先としては下記のようにz-indexプロパティをつける事で解決することがあります。

Safariでborder-radiusが効かない場合

  .sample img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* safari用 */
  }

その他CSSのスタイルが効かない問題

その他CSSが効かない原因としてキャッシュやスタイルの優先順位の問題などがあります。上記までの内容でも改善しない方は下記の記事を参考にしてみましょう。

CSSが効かない原因とその対処法を解説!のイメージ
CSSが効かない原因とその対処法を解説!
CSSを更新しても「ブラウザ上でスタイルが効かない!」といった経験は誰しも一度はあります。今回の記事ではCSSが効かない場合の原因と対処法について解説しています。
今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次