囲み枠の角の丸みを変える方法

 

よくお使いいただいている

角が少し丸いタイプの囲み枠。

やさしい雰囲気になりますよね。

 

 

今回は、

囲み枠の丸みを自分好みに変更する方法をご紹介します。

 

囲み枠の角の丸みを変える方法

 

実　線：solid
 
<div style="display:inline-block; border: 2px solid #C03030; padding: 15px; border-radius: 10px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

このborder-radiusの数値で角の丸みを調整します。

 

 


border-radius: 5px;
 

 

<div style="display:inline-block; border: 2px solid #C03030; padding: 15px; border-radius: 5px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

 


border-radius: 20px;
 

 

<div style="display:inline-block; border: 2px solid #C03030; padding: 15px; border-radius: 20px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

 


border-radius: 30px;
 
 

 

<div style="display:inline-block; border: 2px solid #C03030; padding: 15px; border-radius: 30px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

他の囲み枠にもお使いいただけるので、アレンジしてみてくださいね！

（使えないタイプの囲み枠もあります）

 

 

 

 

 

 

 

LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています！

「マーカー」とメッセージを送ってねドキドキ

友だち追加

ID検索は @570smkow