CSSを使用して丸みを帯びたコーナーを作成する[終了]

CSSを使用して角を丸くするにはどうすればよいですか？

CSS3が導入されて以来、CSSを使用して角を丸く追加する最良の方法は、border-radiusプロパティを使用することです。プロパティの仕様を読むか、MDNに関する有用な実装情報を取得できます。

実装されていない ブラウザー（Chrome pre-v4、Firefox pre-v4、IE8、Opera pre-v10.5、Safari pre-v5）を使用している場合、以下のリンクでさまざまなアプローチの詳細をご覧いただけます。あなたのサイトとコーディングスタイルに合ったものを見つけて、それを使ってください。 border-radius

1. CSSデザイン：カスタムコーナーとボーダーの作成
2. CSS角丸 '丸め'
3. CSSを使用した25の角丸テクニック

私は初期のスタックオーバーフローの作成でにこれを見て、見つけることができませんでした任意の私は下水道を歩いような感じに私を残していなかった丸みを帯びた角を作成する方法を。

CSS3は最終的に

border-radius:

それがまさにあなたがそれを機能させたい方法です。これはSafariとFirefoxの最新バージョンでは問題なく動作しますが、IE7（および私はIE8では考えていません）またはOperaではまったく動作しません。

その間、それはずっとハックです。現在、IE7、FF2 / 3、Safari3、およびOpera 9.5でこれを行うための最もクリーンな方法が他の人々の考えだと思うのを聞きたいです。

ブラウザがサポートしていない場合、通常はcssだけで角が丸くなり、コンテンツが平らな角で表示されます。丸みを帯びた角がサイトにとってそれほど重要でない場合は、以下の線を使用できます。

同じ半径のすべてのコーナーを使用する場合、これは簡単な方法です。

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

しかし、すべてのコーナーを制御したい場合、これは良いことです：

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

各セットに表示されるように、ブラウザー固有のスタイルがあり、4行目ではこれにより標準的な方法で宣言します。将来的に他の人（うまくいけばIEも）がスタイルを用意できるように機能を実装することを決定したと想定します。

他の回答で述べたように、これはFirefox、Safari、Camino、Chromeで美しく機能します。

IEでコーナーを作成することに興味がある場合、これは役に立つかもしれません-http://css3pie.com/

背景画像の使用をお勧めします。他の方法はあまり良くありません：アンチエイリアスと意味のないマークアップはありません。ここはJavaScriptを使用する場所ではありません。

Brajeshwarが言ったように：border-radiuscss3セレクターの使用。今では、あなたは適用することができます-moz-border-radiusし、-webkit-border-radiusそれぞれ、MozillaおよびWebkitのベースのブラウザのために。

では、Internet Explorerはどうなりますか？Microsoftには、Internet Explorerにいくつかの追加機能を追加し、より多くのスキルを得るための多くの動作があります。

ここでは：.htc取得するための行動のファイルround-cornersからborder-radius、あなたのCSSの値。例えば。

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

もちろん、動作セレクターは有効なセレクターではありませんが、条件付きコメントを使用して別のcssファイルに配置できます（IEのみ）。

行動HTCファイル

CSS、3のサポートが新しいバージョンのFirefox、Safari、Chromeに実装されているので、「ボーダー半径」を確認することも役立ちます。

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

他のCSS省略表現と同様に、上記も拡張形式で記述できるため、左上、右上などに異なる境界半径を設定できます。

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

jQueryは、これを個人的に扱う方法です。cssのサポートは最小限であり、画像は面倒であり、jQueryで角を丸くしたい要素を選択できるようにするには、他の人が疑う人もいるでしょうが、私には完全に理にかなっています。私が最近プロジェクトで使用しているプラ​​グインがあります：http : //plugins.jquery.com/project/jquery-roundcorners-canvas

JavaScriptの方法は常に存在しますが（他の回答を参照）、それは純粋にスタイリングであるため、これを実現するためにクライアントスクリプトを使用することには少し反対しています。

私は（制限はありますが）優先する方法は、CSSを使用してボックスの4つのコーナーに配置する4つの角の丸い画像を使用することです。

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

前述のように、制限があります（丸みを帯びたボックスの背景は無地である必要があります。そうしないと、コーナーが背景と一致しません）。それ以外の場合は非常にうまく機能します。

更新：スプライトシートを使用してインプリメンテーションを改善しました。

私は個人的にこのソリューションが一番好きです。IEが湾曲した境界線をレンダリングできるようにする.htcです。

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Safari、Chrome、Firefox> 2、IE> 8、およびKonquerer（そしておそらく他の人）では、border-radiusプロパティを使用してCSSで実行できます。正式にはまだ仕様の一部ではないため、ベンダー固有のプレフィックスを使用してください...

例

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

JavaScriptソリューションは通常、div丸みを帯びた外観にするために小さなsのヒープを追加するか、境界線と負のマージンを使用して1pxのノッチのあるコーナーを作成します。IEでSVGを利用する場合もあります。

IMO、CSSの方が簡単です。CSSの方法はサポートされていないブラウザーでは簡単に低下します。もちろん、これは、クライアントがIE <9などのサポートされていないブラウザーでそれらを強制しない場合のみです。

これが私が最近行ったHTML / js / cssソリューションです。IEで絶対位置を指定すると1ピクセルの丸めエラーが発生するため、コンテナーのピクセル数の幅を偶数にする必要がありますが、かなりきれいです。

HTML：

<div class="s">Content</div>

jQuery：

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS：

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

画像の幅はわずか18ピクセルで、4つのコーナーすべてがパックされています。円のように見えます。

注：2番目の内部ラッパーは必要ありませんが、段落と見出しのマージンがマージンの折りたたみを維持できるように、内部ラッパーにマージンを使用するのが好きです。jqueryをスキップして、内部ラッパーをHTMLに配置することもできます。

丸みを帯びたコーナーを機能させることがいかに複雑かを示すものとして、Yahooでさえも推奨されていません（最初の箇条書きを参照）。確かに、彼らはその記事で1ピクセルの丸みを帯びた角について話しているだけですが、専門知識を持つ企業でさえ、ほとんどの時間、彼らを働かせるには余りにも苦痛であると結論付けているのを見るのは興味深いことです。

あなたのデザインがそれらなしで生き残ることができるなら、それは最も簡単な解決策です。

確かに、幅が固定されていれば、CSSを使用するのは非常に簡単で、不快なことも面倒なこともありません。物事が途切れるのは、両方向にスケーリングする必要があるときです。いくつかのソリューションは、それを実現するために互いの上に積み重ねられた驚異的な量のdivを持っています。

私の解決策は、丸みを帯びたコーナーを使用する場合（当面の間）、固定幅にする必要があることをデザイナーに指示することです。デザイナーは丸みを帯びた角が大好きです（私もそうです）ので、これは妥当な妥協案だと思います。

Ruzee Bordersは、すべての主要ブラウザー（Firefox 2/3、Chrome、Safari 3、IE6 / 7/8）で機能する、JavaScriptベースのアンチエイリアス処理された角丸ソリューションであり、また、丸みのある要素と親要素の両方に背景画像が含まれています。ボーダー、シャドウ、グローも行います。

新しいRUZEE.ShadedBorderも別のオプションですが、CSSからスタイル情報を取得するためのサポートがありません。

border-radiusソリューションを使用する場合は、safari / chrome / FFで動作するようにするcssを生成するこの素晴らしいWebサイトがあります。

とにかく、あなたのデザインは丸みを帯びた角に依存すべきではないと私は思います、そしてあなたがツイッターを見れば、彼らはIEとオペラユーザーにF ****と言うだけです。角を丸くするのはいいことです。個人的には、IEを使用しないクールなユーザーのためにこれを保持しても問題ありません。

もちろん、それはクライアントの意見ではありません。ここにリンクがあります：http : //border-radius.com/

上記のhtcソリューションの追加に加えて、IEの角を丸くするための別のソリューションと例を次に示します。

「最良の」方法はありません。あなたのために働く方法とそうでない方法があります。そうは言っても、CSS + Imageベースの滑らかなラウンドコーナーテクニックの作成に関する記事をここに投稿しました。

CSSと画像を使用した角の丸いボックス-パート2

このトリックの概要は、ネストされたDIVと背景画像の繰り返しと配置を使用することです。固定幅のレイアウト（固定幅の伸縮可能な高さ）の場合、3つのDIVと3つの画像が必要です。滑らかな幅のレイアウト（伸縮可能な幅と高さ）の場合、9つのDIVと9つの画像が必要です。複雑すぎると考える人もいますが、私見はこれまでで最も近いソリューションです。ハッキング、JavaScriptはありません。

しばらく前にブログ記事を書いたので、詳しくはこちらをご覧ください

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

それはかなりうまくいきます。JavaScriptは必要ありません。CSSとHTMLが必要です。他のものと干渉する最小限のHTMLで。これはMonoが投稿したものと非常によく似ていますが、IE 6固有のハックが含まれておらず、確認したところ、まったく機能していないようです。また、角の近くにあるテキストをブロックしないように、各角の画像の内側部分を透明にすることもできます。外側の部分は透明であってはならず、丸みのないdivの境界を覆うことができます。

また、CSS3がborder-radiusで広くサポートされると、それが丸みを帯びた角を作るための公式の最良の方法になります。

CSSを使用しないでください。jQueryは何度も言及されています。要素の背景と境界を完全に制御する必要がある場合は、jQuery Background Canvas Pluginを試してみてください。HTML5 Canvas要素を背景に配置し、必要なすべての背景または境界線を描画できるようにします。丸みを帯びたコーナー、グラデーションなど。

Operaはまだborder-radiusをサポートしていません（どうやらバージョン10以降のリリースに含まれる予定です）。それまでの間、CSSを使用してSVG背景を設定し、同様の効果を作成できます。