今回は、CSSを使って指定した要素（アイフレや記事部分）の角を丸くする方法を簡単にご紹介したいと思います。
では、さっそくですが！
【 CSS 】 （※使い方は後で詳しく説明します。）
.corner {
border-top-left-radius: 10px; /* 左上の角 */
border-top-right-radius: 10px; /* 右上の角 */
border-bottom-left-radius: 10px; /* 左下の角 */
border-bottom-right-radius: 10px; /* 右下の角 */
}
現在、10pxとなっている数字を変更することで角の丸みの大きさを変更できます。border-top-left-radius: 10px; /* 左上の角 */
border-top-right-radius: 10px; /* 右上の角 */
border-bottom-left-radius: 10px; /* 左下の角 */
border-bottom-right-radius: 10px; /* 右下の角 */
}
【 使い方 】
たとえば、「aihure1」という名前で作っているボックス（アイフレ）があるとします。
<div id="aihure1">
内容
</div>
これに、、、、『class="corner"』というのを追記します。
<div id="aihure1" class="corner">
内容
</div>
これで、「aihure1」は角が丸くなります。
<div id="aihure1">
内容
</div>
これに、、、、『class="corner"』というのを追記します。
<div id="aihure1" class="corner">
内容
</div>
これで、「aihure1」は角が丸くなります。
つまり！！
好きな場所に、『class="corner"』を付けるだけで角が丸くなるということですね＾＾
質問はコメントなどで受け付けていますので使ってみてください！
では、またっ！