border-radius

スポンサーリンク
CSS

[CSS]border-radiusでtableに角丸を適用させる方法

CSS HTML デモ table {border-collapse: separate;border-spacing: 0;border-top: 1px solid #dedede;border-left: 1px solid #ded...
CSSプロパティ

[CSS]border-radiusで正円表示

border-radiusで正円表示 border-radiusピクセル指定 border-radiusパーセント指定
CSSスニペット

[CSS]半円を表示する方法(半円上、半円下、半円左、半円右)

CSS3の「border-radius」の四隅の値と「width」と「height」の値の比率を調整して、「半円」を表示する方法をコード付きで紹介します。 正円 まず、border-radiusにより正円を作ります。これが半円を作っていく上...
CSS

[CSS]iOSのテキストフォームの角丸や影を消すなどデザインを変更する方法

iOSでテキストフォームを見ると、デフォルトで角丸だったりシャドウ(影)が掛かっていたりしますので、サイトに合わせてフォームのデザインを変更した場合が多々有ります。 今回はiPhoneやiPad向けに、inputのデザインをCSSで補正する...
jQueryプラグイン・ライブラリ

[jQuery]IE8以下で角丸を使えるプラグインjQuery curvyCorners

CSS3のborder-radius を使えば簡単に角丸を実現できますが、CSS3 が対応していないIE8 以下でも角丸を使えるようにするjQueryプラグインがjQuery curvyCornersです。 jQuery curvyCorn...
CSSプロパティ

[CSS]imgタグの画像をborder-radiusで角丸にして表示する方法

以前にCSS3 のborder-radius で角丸を作る方法の記事でもborder-radiusの基本的な使い方を紹介させていただきましたが、今回は「画像の四隅を角丸」にして表示させる方法のご紹介です。 画像を角丸で表示させる <img>...
CSSプロパティ

[CSS]CSS3のborder-radiusで要素や画像で円形に表示する方法

CSS3のborder-radiusは要素を角丸にすることができる便利なプロパティで、角丸の値を調整することで、画像や要素を正円(円形)で表示することもできます。 IE7以下でも利用したい場合は(試していませんが)、PIEなどを使えば実現可...
CSSプロパティ

[CSS]CSS3のborder-radiusで角丸を作る方法

CSS3よりborder-radiusのプロパティを使う事で簡単に角丸のオブジェクトが表現できるようになりました。 今回はborder-radiusを使って様々な角丸のサンプルを紹介したいと思います。 border-radius の記述方法...
CSS擬似要素・擬似クラス

[CSS]CSSで円形、三角形、台形、星形 などを表現する方法のまとめ

CSS3のborder-radiusやtransformなどを利用して、CSSだけで円形、三角形、台形、星形などのオブジェクトを表現する方法のまとめです。 円形 三角形 台形 星形 #star-five {margin: 50px 0;po...
スポンサーリンク