border-imageにborder-radiusがきかないので擬似的に表現する

2020年1月20日

border-image-radius

枠線(border)にグラデーションをつける

ミフネWEBネットショップのトップページにも使っていますが、cssのborde-imageに linear-gradientをつかってグラデーション枠をつけることができます。

見本で載せるとこんなのです。

border-image:linear-gradient(135deg,tomato,blue);
border-image-width:10px;
border-image-slice:1;

 

詳しい説明するとかなり長くなるので省略します。(いつかちゃんと書きたい)

border-imageにborder-radiusがきかない

で、たとえばこれの角に丸みをつけようとすると、border-radius : を使えばいいんじゃない? と思うところなんですが、残念ながらborder-imageにborder-radiusは効きません

 

そういうわけで仕方がないので、疑似要素を使って擬似的なborder-image-radius(←こんな要素はありません。念の為。)を表現します。

先ほどのborder-image はいったん忘れてください。

HTML

<div></div>

CSS

div{
width: 150px;
height: 150px;
background-color: #fff;
border-radius: 20px;
position: relative;
}
div:: after{
content: “”;
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
background: linear-gradient(135deg, tomato, blue);
border-radius: 20px;
z-index: -1;
}

こちらも表示例を載せようと思ったのですが、またしてもWordpressの何かが邪魔しているようです。わざわざphp触るのも面倒なのでcodepen 載せておきます。