どうも！LSSです！！
先日の記事で、
を試した際に、double（二重線）で指定した枠線部分も奇妙に歪んだりしていました。
枠線の種類は solid double dotted dashed inset outset ridge groove と多数ありますが、この変わったborder-radiusと組み合わせた場合にそれぞれどんな風に表示されるのか？を試してみる記事となります。
あまり奇妙にならないものが囲み枠として使いやすいかと思いますが、果たして…？
solidの場合
変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。
border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは solid になります。
コード
<div style="border-radius: 20px /50%; border: 6px solid lightgreen; padding: 5px 20px;">
<p>変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。</p>
<p> </p>
<p>border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは solid になります。</p>
</div>
doubleの場合
変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。
border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは double になります。
コード
<div style="border-radius: 20px /50%; border: 6px double lightgreen; padding: 5px 20px;">
<p>変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。</p>
<p> </p>
<p>border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは double になります。</p>
</div>
dottedの場合
変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。
border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは dotted になります。
コード
<div style="border-radius: 20px /50%; border: 6px dotted lightgreen; padding: 5px 20px;">
<p>変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。</p>
<p> </p>
<p>border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは dotted になります。</p>
</div>
dashedの場合
変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。
border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは dashed になります。
※ここだけ幅を2pxにしてみました。
コード
<div style="border-radius: 20px /50%; border: 2px dashed lightgreen; padding: 5px 20px;">
<p>変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。</p>
<p> </p>
<p>border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは dashed になります。</p>
</div>
insetの場合
変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。
border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは inset になります。
コード
<div style="border-radius: 20px /50%; border: 6px inset lightgreen; padding: 5px 20px;">
<p>変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。</p>
<p> </p>
<p>border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは inset になります。</p>
</div>
outsetの場合
変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。
border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは outset になります。
コード
<div style="border-radius: 20px /50%; border: 6px outset lightgreen; padding: 5px 20px;">
<p>変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。</p>
<p> </p>
<p>border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは outset になります。</p>
</div>
ridgeの場合
変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。
border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは ridge になります。
コード
<div style="border-radius: 20px /50%; border: 6px ridge lightgreen; padding: 5px 20px;">
<p>変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。</p>
<p> </p>
<p>border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは ridge になります。</p>
</div>
grooveの場合
変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。
border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは groove になります。
コード
<div style="border-radius: 20px /50%; border: 6px groove lightgreen; padding: 5px 20px;">
<p>変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。</p>
<p> </p>
<p>border-styleの種類は solid double dotted dashed inset outset ridge groove があり、これは groove になります。</p>
</div>
あとがき
inset outset ridge groove などの色の濃淡が変化して立体的に見せる系のborder-styleは、色の変わり目の位置が意外な場所になったりしますね。
あまり気にしなければそれっぽく見えますが、気にしはじめると気になってしまいますｗ
囲み枠として、無難に使えそうなのは、幅を小さめにした dashed かな？と思いますが、 dotted も可愛いですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
