CSS border-radiusが効かない原因と対応方法

border-radiusは要素を角丸にするCSSプロパティです。

しかしある条件によりborder-radiusが効かない、角丸にならない場合があります。

そんなCSS border-radiusが効かない原因と対応方法について解説します。

ケース1.border-radiusを指定した子要素が角丸にならない

原因：border-radiusは子要素に引き継がない

border-radiusは子要素に引き継がないので角丸になりません。

失敗例

<style>
.radius{
	border-radius: 20px;
	border: 5px solid red;
	width: 200px;
}
.radius img{
	display: block;
	width: 100%;
	height: auto;
}
</style>

<div class="radius">
	<img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
</div>

親要素はちゃんと角丸になっているのに子要素は角丸にならず、角がはみ出ています。

対応方法1：overflow:hiddenを指定する

成功例

<style>
.radius2{
	border-radius: 20px;
	border: 5px solid red;
	width: 200px;
	/*コレ*/overflow: hidden;
}
.radius2 img{
	display: block;
	width: 100%;
	height: auto;
}
</style>
<div class="radius2">
	<img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
</div>

border-radiusを指定している要素にoverflow: hiddenを指定します。
overflow: hiddenは はみだした要素を隠すCSSです。
よって はみ出していたimgの角丸が隠れて画像が角丸になりました。

対応方法2：子要素にborder-radiusを指定する

成功例

<style>
.radius3{
	border: 5px solid red;
	width: 200px;
}
.radius3 img{
	display: block;
	width: 100%;
	height: auto;
	/*コレ*/border-radius: 20px;
}
</style>
<div class="radius3">
	<img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
</div>

角丸にしたい要素そのものにborder-radiusを指定すれば角丸になります。

ケース2.Safariでborder-radiusが効かない

原因：safiri固有のバグ

Safari固有のバグでborder-radiusが効かないことがあります。

対応方法:z-indexを指定する

border-radiusを指定した要素にz-indexを指定します。
z-indexの値は基本的に1でいいですが、positionの影響がある場合は他の数値にして調整しましょう。

ケース3.tableタグが角丸にならない

tableを角丸にする手順はこちら↓

原因1：border-collapse: collapse;が指定されている

失敗例

td1	td2
td3	td4

<style>
.radius4{
	border: 1px solid #000;
	border-radius: 20px;
	/*コレ*/border-collapse: collapse;
}
</style>

<table class="radius4">
  <tbody>
    <tr>
      <td>td1</td>
      <td>td2</td>
    </tr>
    <tr>
      <td>td3</td>
      <td>td4</td>
    </tr>
  </tbody>
</table>

上記はtdにはborderを指定せずtableだけにborder-radiusを指定した例です。

border-radiusがあるにもかかわらず角丸になっていません。

border-collapse: collapseは隣接するセルのボーダーを重ねて表示させるCSSですが、これがあると角丸になりません。

対応方法：border-collapse: collapseを指定しない

成功例

td1	td2
td3	td4

<style>
.radius5{
	border: 1px solid #000;
	border-radius: 20px;
	/*コレ*/border-collapse: separate;
	/*コレ*/border-spacing: 0;
}
</style>

<table class="radius5">
  <tbody>
    <tr>
      <td>td1</td>
      <td>td2</td>
    </tr>
    <tr>
      <td>td3</td>
      <td>td4</td>
    </tr>
  </tbody>
</table>

border-collapse: collapseを指定しない、が正解ですが、border-collapse: collapseがかかっていて、それを消せないのならborder-collapse: separateで上書きしましょう。

border-collapse: separateは隣接するセルのボーダーを間隔をあけて表示させるCSSです。

これをこのまま指定すると間隔があいてしまい意図した表示にならないかと思います。

隙間をなくすためにborder-spacing: 0を指定しましょう。

原因2：tdにborder-radiusを指定していない

この記事最初に紹介したケース1と同じ理由で子要素が角丸になりません。

失敗例

td1	td2
td3	td4

<style>
.radius6{
	border: 5px solid red;
	border-radius: 20px;
	border-spacing: 0;
}
.radius6 td{
	border: 2px solid #000;
	background: #FFF;
}
</style>

<table class="radius6">
  <tbody>
    <tr>
      <td>td1</td>
      <td>td2</td>
    </tr>
    <tr>
      <td>td3</td>
      <td>td4</td>
    </tr>
  </tbody>
</table>

対応方法も同じです。

対応方法1：overflow:hiddenを指定する

成功例

td1	td2
td3	td4

<style>
.radius7{
	border: 5px solid red;
	border-radius: 20px;
	border-spacing: 0;
	overflow: hidden;
}
.radius7 td{
	border: 2px solid #000;
	background: #FFF;
}
</style>

<table class="radius7">
  <tbody>
    <tr>
      <td>td1</td>
      <td>td2</td>
    </tr>
    <tr>
      <td>td3</td>
      <td>td4</td>
    </tr>
  </tbody>
</table>

対応方法2：子要素にborder-radiusを指定する

左上、右上、左下、右下それぞれのtdの一部のみ角丸にする必要があります。

成功例

td1	td2
td3	td4

<style>
.radius8{
	border: 5px solid red;
	border-radius: 20px;
	border-spacing: 0;
}
.radius8 td{
	border: 2px solid #000;
	background: #FFF;
}
.radius8 tr:first-child td:first-child{
	border-radius: 13px 0 0 0;
}
.radius8 tr:first-child td:last-child{
	border-radius: 0 13px 0 0;
}
.radius8 tr:last-child td:first-child{
	border-radius: 0 0 0 13px;
}
.radius8 tr:last-child td:last-child{
	border-radius: 0 0 13px 0;
}
</style>

<table class="radius8">
  <tbody>
    <tr>
      <td>td1</td>
      <td>td2</td>
    </tr>
    <tr>
      <td>td3</td>
      <td>td4</td>
    </tr>
  </tbody>
</table>

border-radiusは一部だけ角丸にする事ができます。

first-childとlast-childを使い、最初の行の最後の列＝右上 といった指定をしています。

親要素も線あり角丸の場合、子要素の角は親要素と子要素の角の幅分引かないと不自然な隙間ができるので注意しましょう。

【まとめ】CSS border-radiusが効かない原因と対応方法

ケース1.border-radiusを指定した子要素が角丸にならない

対応方法1：overflow:hiddenを指定する

対応方法2：子要素にborder-radiusを指定する

ケース2.Safariでborder-radiusが効かない

対応方法:z-indexを指定する

ケース3.tableタグが角丸にならない

対応方法：border-collapse: collapseを指定しない

以上、CSS border-radiusが効かない原因と対応方法でした。