CSSでborderを透明/半透明にする方法を解説!
CSSでborderを透明や半透明にする方法をサンプルコードを使って解説します。枠線だけ透明にするやり方では「background-clip」を使って実現していきます。
CSSでborderを透明/半透明にしたい
CSSでborderのプロパティで枠線を任意の太さ、種類、色で指定できますが、今回の記事ではborderを透明や半透明にする方法について解説していきます。
単純に枠線を透明にしたいのであれば、カラーにtransparent
を設定したり、そもそも枠線自体を消せばいいですが、半透明で用意したい場合もあります。
例えば背景画像や背景色が親要素にあり、子要素側で枠線を透過させたいケースで使えます。
CSSでborderを透明/半透明にする方法
それではborder
を透明・半透明にする方法です。
opacityを使う方法
最初にopacity
プロパティを使う方法です。
子要素に対して透過を実現するopacity
プロパティを設定することで、子要素自体を透明にしています。
当然枠線も透明になりますが、子要素自体が透明になりますので、子要素は透明にしたくないという方は次を試してみましょう。
カラーで透過の色を使う方法
それでは下記のサンプルコードを見てみましょう。
border
に対してrgbaで透過の色を適用しています。ただしborder
に透過の色を適用しただけでは枠線は透過にはなりません。
ポイントとしてはbackground-clipのプロパティです。backgrond-clip
プロパティは背景をボックスのどこまで拡張していくかを決めるプロパティです。
padding-box
と値を設定することで、文字通り背景はパティングボックスまでになり、そのためborder
の透過の色が反映されます。
先程のopacity
のプロパティの例とは違い枠線だけが透過されているのも確認できるかと思います。
backgrojnd-clip
ですが、各ブラウザの対応状況は下記のリンクで確認出来ます。必要に応じてベンダープレフィックスを適用しましょう。
無料
【5月31日まで】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。
無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!
例えば背景画像があるときに、その子要素の枠線を透過にするやり方です。