CSSでborderを透明/半透明にする方法を解説!

CSSでborderを透明や半透明にする方法をサンプルコードを使って解説します。枠線だけ透明にするやり方では「background-clip」を使って実現していきます。

コンテンツ [表示]

  1. 1CSSでborderを透明/半透明にしたい
  2. 2CSSでborderを透明/半透明にする方法
  3. 2.1opacityを使う方法
  4. 2.2カラーで透過の色を使う方法

CSSでborderを透明/半透明にしたい

CSSでborderのプロパティで枠線を任意の太さ、種類、色で指定できますが、今回の記事ではborderを透明や半透明にする方法について解説していきます。

単純に枠線を透明にしたいのであれば、カラーにtransparentを設定したり、そもそも枠線自体を消せばいいですが、半透明で用意したい場合もあります。

例えば背景画像や背景色が親要素にあり、子要素側で枠線を透過させたいケースで使えます。

枠線が透過のイメージ

例えば背景画像があるときに、その子要素の枠線を透過にするやり方です。

CSSでborderを透明/半透明にする方法

それではborderを透明・半透明にする方法です。

opacityを使う方法

最初にopacityプロパティを使う方法です。

子要素に対して透過を実現するopacityプロパティを設定することで、子要素自体を透明にしています。

当然枠線も透明になりますが、子要素自体が透明になりますので、子要素は透明にしたくないという方は次を試してみましょう。

あわせて読みたい
opacity
CSSのopacityプロパティは要素の透明度を指定するプロパティです。opacityプロパティの構文や使い方をサンプルコード付きで解説します。

カラーで透過の色を使う方法

それでは下記のサンプルコードを見てみましょう。

borderに対してrgbaで透過の色を適用しています。ただしborderに透過の色を適用しただけでは枠線は透過にはなりません。

ポイントとしてはbackground-clipのプロパティです。backgrond-clipプロパティは背景をボックスのどこまで拡張していくかを決めるプロパティです。

padding-boxと値を設定することで、文字通り背景はパティングボックスまでになり、そのためborderの透過の色が反映されます。

先程のopacityのプロパティの例とは違い枠線だけが透過されているのも確認できるかと思います。

backgrojnd-clipですが、各ブラウザの対応状況は下記のリンクで確認出来ます。必要に応じてベンダープレフィックスを適用しましょう。

Can I use... Support tables for HTML5, CSS3, etc

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

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

関連記事

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

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

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

目次