【CSS】border-radiusとborder-imageは併用不可、ですが、強引になんとかしてみました。
どうも！LSSです！！
【CSS】虹色の枠線、もう２種類！ - Little Strange Software
で作った枠線ですが、こちらはborder-imageを使って描いていました。
border-imageを使うと枠線の表現の幅が広がって面白いのですが、「border-radius（角丸）」や「border-style（枠線の種類を点線や二重線にする）」の指定と共存できない、というのが、ちょっと惜しいところです^^;
画像ファイルを用意して表現する事は可能ですが、gradientを使って…となるとあまり自由が利かなかったりもします。
今回は、「なかばインチキ」な方法ではありますが、「虹色の枠線」を角丸にする方法を試してみました！
虹色の角丸枠線
虹色の枠線 角丸１
コード
<div style="border: 5px solid transparent; border-radius: 10px; padding: 5px; background: padding-box linear-gradient(white,white), border-box repeating-linear-gradient(135deg,red 0px 9px,orange 20px 29px,yellow 40px 49px,green 60px 69px,lightblue 80px 89px,blue 100px 109px,purple 120px 129px,red 140px);">虹色の枠線 角丸１</div>
虹色の枠線 角丸２
コード
<div style="border: 5px solid transparent; border-radius: 10px; padding: 5px; background: padding-box linear-gradient(white,white), border-box repeating-linear-gradient(135deg,red 0px 9px,transparent 10px 19px,orange 20px 29px,transparent 30px 39px,yellow 40px 49px,transparent 50px 59px,green 60px 69px,transparent 70px 79px,lightblue 80px 89px,transparent 90px 99px,blue 100px 109px,transparent 110px 119px,purple 120px 129px,transparent 130px 139px);">虹色の枠線 角丸２</div>
解説
コード中の CSS部分だけを、分かりやすいように改行を入れてみます。
border: 5px solid transparent;
border-radius: 10px;
padding: 5px;
background:
padding-box linear-gradient(white,white),
border-box repeating-linear-gradient(135deg,red 0px 9px,orange 20px 29px,yellow 40px 49px,green 60px 69px,lightblue 80px 89px,blue 100px 109px,purple 120px 129px,red 140px);
border: 5px solid transparent;
枠線の太さを5pxに指定しています。
ただし、今回は枠線として表示しないので、色をtransparent（透明）としています。
border-radius: 10px;
角丸の指定です。数値を大きくすると、角の丸くなっている箇所が大きくなります。
padding: 5px;
中の文字が読みやすいように、内側に余白を5px設定しました。
background:
padding-box linear-gradient(white,white),
border-box repeating-linear-gradient(135deg,red 0px 9px,orange 20px 29px,yellow 40px 49px,green 60px 69px,lightblue 80px 89px,blue 100px 109px,purple 120px 129px,red 140px);
これがインチキポイント！
枠線のように見える今回の虹色の線、実は「背景画像」として表示しています。
背景画像を指定するbackgroundプロパティは、カンマ区切りで複数重ね合わせて表示できますが、今回は
「background : padding-box 内側のlinear-gradient , border-box 外側のrepeating-linear-gradient」
という形で指定しました。
「外側」に前回の虹色模様となるrepeating-linear-gradientを置き、内側には
「linear-gradient(white,white)」（白で塗りつぶし、という事になります）
を置いています。
つまり、「背景全部を虹色に塗りつぶした上から、少し周りを残して（これはborderで指定した5px）白で塗りつぶす」という事をしているんですね。
border-box、padding-box、content-box
divタグなどを置いてHTML要素とした時、その１つの要素は多重のboxで包まれる事になります。
border-box
padding-box
content-box
もっとも外側の「border-box」は、通常borderで描く枠線が描かれる領域で、border-width（border）プロパティで幅を指定できます。
その内側の「padding-box」は「余白」に使われる領域で、paddingプロパティで幅を指定します。
そしてそれらの内側にある「content-box」が、divタグなどで挟んだ内容（文章など）が入る領域となります。
backgroundプロパティで背景画像を指定する時に、これら「○○-box」を指定する事で、その背景画像を「どの領域の背景として使うか」を指定できるんですね^^
※backgroundプロパティは複合プロパティで、background-○○系のプロパティを一括で指定できます。ここでいうboxの指定はそのうち「background-clip」の指定に該当します。
参考：【CSS／実験】background-clipをカンマ区切りにしてみた
あとがき
「border-imageはborder-radiusは併用不可」ですが、「border-imageを使わなければborder-radiusは使える」わけで、border-imageの代わりにbackgroundをそれっぽく使う、という方法での対応でした^^
border-imageとの違いは「内側を白で塗りつぶしている」ので、地の色が違う場合は内側の色を合わせて変えないといけなかったりしますし、模様などの場合は透過ができない…という点があります。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
