CSSのborder-radiusは実はすごかった！あまり知られていない機能を使用して、かっこいいレイアウトを作る方法

border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。 矩形や角丸だけのレイアウトではなく、さまざまな形を使用できるスタイルシートのテクニックを紹介します。 CSS border-radius can do that? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに border-radiusの基礎知識 流れに逆らう（わないで） はじめに 今年開催されたFrontend Conferenceにて、Rachel AndrewはCSS Gridのレイアウトについて講演しました。中でも私が注目したのは、彼女の話の終わりにあったCSSの古いプロパティについてです。 イメージはborder-radiusプロパティを使用するだけで、用

[coliss]

border-radiusプロパティを使った極上テクニック

[kathew]

「それCSSでできるよ」の引き出しに閉まっておく

[localnavi]

border-radiusが全部で８箇所指定できたことすら知らなかった。そして何これスゴイ！

[otchy210]

4 つまでしか知らなかった－！でもこれもそうだけど、css でグラデーションを扱ったり、ベジェ曲線扱ったりするやつは、もはやジェネレータありきだよなー。

[mizchi]

border-radiusによる画像クリッピング、GPU負荷もすごいのでアニメーションさせる際は気をつけてほしい

[ebo-c]

ロータリーエンジンおむすび！/個人的に「実は」でなくborder-radiusはgradientと並んでなく掛け値なしに2010年代最高のcss propだと思ってる

[shimooka]

『border-radiusの値は最高で8つ設定することができます』えっ？

[m4fg]

これをcss animationするとすごそう

[Futaro99]

またクソハックかと思ったら割と良かった

[trashtoy]

以前 webcreatorbox でも取り上げられていて, すごいと思った https://www.webcreatorbox.com/tech/border-radius

[latena]

IE11 でも動く...！

[kazuhi_ra]

ピック型とかできそう

[y-kawaz]

何度目ネタだよと思ってみたら8個指定しらんくてファ？てなった。

[diveintounlimit]

数日前のCSS TricksのRSSで「ないわー」って思いながら見てた。

[kitone]

びびった

[roppara]

%とpxで違いが出るのは知ってたけど8つも設定できたのは知らんかった転職関連で

[mami-hate]

ピュアCSSでborder-radiusを8箇所指定する。

[yshdyk11202000]

知らなかった

[anmin_1990]

これは凄い… めっちゃ勉強になる

[yurikago12]

おもしろい

[araishi]

おしゃれ角丸

[kenichi_odo]

そうそう細かく設定できるんだけど使いこなせる気はしない

[tokage3]

すごいんだけど頭の中でイメージする形を再現するのが難しそう。

[primedesignworks]

8 個設定できることすら知らんかったわ…。

[ElizaAcolyte]

8個……8個！？ 基本的には画像でえーやんって感じだけど、アニメーションさせる場合は良いかもなぁ。記憶の片隅に。

[yone-yama]

ホエーすごい 裏技感

[tomotan_uki]

あと角の値を「a b c 」や「a b」と数値を省略して指定したら、それ用に独自のルールで解釈されて、いつも混乱するぞ（笑）http://www.htmq.com/css3/border-radius.shtml

[AzuLitchi]

いつか使う…！と思いながら結局透過PNG作っちゃいそうなやつ

[ksugimori]

知らなかった。使いどころがあるかわからないけど覚えとこう

[ono_matope]

面白かった

[uzimith]

画像でいい説もあるな

[shields-pikes]

何これ、知らなかった。これで、iOSのアプリアイコンの丸四角も正確に再現できないかな。誰かやってみて欲しい。俺がやってもいいけど。

[cl-gaku]

思ったより面白いぞ

[khtokage]

すげえ…