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

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

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

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

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

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

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

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

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

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

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

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

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

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

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