CSSだけでborderの端を丸くする | q-Az

テクノロジーカテゴリーの変更を依頼記事元:

q-az.net

11 usersがブックマークコメント

コメント

1

記事へのコメント1件

注目コメント
新着コメント

web_shufu “現在このブログでも h2 要素が角丸直線になっています。パっと見で気が付きません。”

2016/12/02 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

規約違反を報告

アプリのスクリーンショット

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

関連記事

CSSだけでborderの端を丸くする | q-Az

実際には今のところ純粋な border の端を丸めることはできません。 border-radius を使えば出来そうな気... 実際には今のところ純粋な border の端を丸めることはできません。 border-radius を使えば出来そうな気もするのですがやってみると上手くいかないです。 border-radius を使うと半円のような感じになってしまいます。細長い長方形の端を丸めるborder-radius では端だけを丸めることはできないので、ここでは border を使うのではなく細長い長方形の疑似要素を作りその頂点を丸くすることで角丸な線を実現します。 HTML<div class="round-cap">ここに角丸下 border</div>

CSS
HTML

ブックマークしたユーザー

hugre2021/10/20
konisimple2018/01/04
whois_lab2017/05/26
nasust2016/12/02
nikousatsu2016/12/02
web_shufu2016/12/02
zzdino2016/12/02
pc-bohemian2016/12/02

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

設定を変更しましたx