Movatterモバイル変換


[0]ホーム

URL:


はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマーク
  • テクノロジー
  • 今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦!
  • Twitterでシェア
  • Facebookでシェア

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

260usersがブックマークコメント16

    ガイドラインをご確認の上、良識あるコメントにご協力ください

    0/0
    入力したタグを追加

    現在プライベートモードです設定を変更する

    おすすめタグタグについて

      よく使うタグ

        今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦!

        ガイドラインをご確認の上、良識あるコメントにご協力ください

        0/0
        入力したタグを追加

        現在プライベートモードです設定を変更する

        おすすめタグタグについて

          よく使うタグ

            はてなブックマーク

            はてなブックマークで
            関心をシェアしよう

            みんなの興味と感想が集まることで
            新しい発見や、深堀りがもっと楽しく

            ユーザー登録

            アカウントをお持ちの方はログインページ

            記事へのコメント16

            • 注目コメント
            • 新着コメント
            tamaimai
            “border-radius: 10px;”

              その他
              real1223
              css, 便利, 困ったとき

                その他
                tsuki-rs
                おもしろい!

                その他
                sol1og
                “ 240px 15px 100px 15px / 15px 200px 15px 185px;”

                  その他
                  kathew
                  アイデア。「ふにゃんと曲がった歪みライン」すげえええ

                  その他
                  Wideplain
                  “border-radius: 80% 30% 50% 50%/50%;}”

                  その他
                  kakitoaki08
                  “border-radius: 10px 20px 30px 40px;”[角丸]

                  その他
                  mattarin
                  楕円の応用

                  その他
                  tailtame
                  クローバーなるほど

                  その他
                  htn_50koma
                  今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦!

                  その他
                  anklelab
                  ほぇ~いろいろできそうだなぁ(特に思いつかない)

                  その他
                  imaginaration
                  楕円ってこうやってたんだ

                  その他
                  psfactory
                  今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦! | Webクリエイターボックス

                    その他
                    trashtoy
                    border-radius を楕円にすることでこんなに応用が広がるのか

                      その他
                      nohako
                      角丸表現ほんとかわいい

                        その他
                        renos
                        ふよんふよん

                        その他

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

                        リンクを埋め込む

                        以下のコードをコピーしてサイトに埋め込むことができます

                        プレビュー
                        アプリのスクリーンショット
                        いまの話題をアプリでチェック!
                        • バナー広告なし
                        • ミュート機能あり
                        • ダークモード搭載
                        アプリをダウンロード

                        関連記事

                          usersに達しました!

                          さんが1番目にブックマークした記事「今さら聞けない!? ...」が注目されています。

                          気持ちをシェアしよう

                          ツイートする

                          今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦!

                          今さら聞けない!?CSSのborder-radiusで様々な角丸に挑戦!要素の四隅の角を丸めるためのCSSプロパティ...今さら聞けない!?CSSのborder-radiusで様々な角丸に挑戦!要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…!今回はそんなborder-radiusの基的な使い方と、応用表現を紹介します! 無難で王道!正円の円弧を使った角丸border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すれば OK。半径 10px の正円の円弧をベースにした角丸

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

                          • hbid2025/11/15hbid
                          • kjtec2024/12/24kjtec
                          • sam-ple2024/06/04sam-ple
                          • chayamaeki2024/02/29chayamaeki
                          • tsu4420002023/09/01tsu442000
                          • ar02022/11/09ar0
                          • zaitakujin2022/10/09zaitakujin
                          • shirasugohan01412022/08/18shirasugohan0141
                          • chibahiro2021/10/15chibahiro
                          • mieki2562021/07/22mieki256
                          • akira_maru2021/05/14akira_maru
                          • nekokanou2021/02/12nekokanou
                          • norimaking7772021/01/04norimaking777
                          • himisuzu2020/12/18himisuzu
                          • hayasi-n2020/09/17hayasi-n
                          • boxheadroom2020/06/30boxheadroom
                          • skyguild2020/02/17skyguild
                          • ninomae-makoto-develop2020/01/28ninomae-makoto-develop
                          すべてのユーザーの
                          詳細を表示します

                          ブックマークしたすべてのユーザー

                          同じサイトの新着

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

                          いま人気の記事

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

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

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

                          新着記事 - テクノロジー

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

                          同時期にブックマークされた記事

                          いま人気の記事 - 企業メディア

                          企業メディアをもっと読む

                          はてなブックマーク

                          公式Twitter

                          はてなのサービス

                          • App Storeからダウンロード
                          • Google Playで手に入れよう
                          Copyright © 2005-2025Hatena. All Rights Reserved.
                          設定を変更しましたx

                          [8]ページ先頭

                          ©2009-2025 Movatter.jp