2012-04-09 5 views
46

私のサイトでは、divを一番上のコーナーにだけ丸みを帯びたものにする必要があります。しかし、私はこれを行う方法を知らない。誰か助けてくれますか?CSSの枠線の上部にのみ角を丸くするにはどうすればよいですか?

+3

設定しようとしたときに試してみました何[ ' border-radius'](http://www.w3.org/TR/css3-background/#the-border-radius)? – Sampson

+5

本当の質問を構成するものは混乱しています。これが本当の質問ではないなら、それは何ですか? –

+2

この質問の最初の改訂版でさえ、何が尋ねられているかを見るのは簡単でした。私は同意する、これは閉鎖されていてはならない。 – thomasrutter

答えて

105

ブレンダンの答えは正しいですが、それはより多くのブラウザでレンダリングするために取得するには、これを使用する必要があります

-moz-border-radius: 0px; 
-webkit-border-radius: 3px 3px 0px 0px; 
border-radius: 3px 3px 0px 0px; 
+15

border-radiusはすでにかなり標準化されています。ベンダーのプレフィックスを付けずに新しいブラウザーすべてで動作します。 –

+2

ただし、誰もが新しいブラウザを使用していると仮定することはできません。あなたの拠点をカバーする方がよいでしょう。 – NotJay

+3

合意しましたが、今すぐ '-moz-'を削除してもかまいません - それは十分に長くなっています – marksyzm

30
border-top-left-radius: 3px; 
border-top-right-radius: 3px; 
+1

助けてくれてありがとう... – ali

+1

注:受け入れられた答えは、丸い角を上に置きますが、下の角も正方形に変わります。 – dfmiller

20

他の答えは正しいですが、速記ソリューションがあります:

border-radius: 3px 3px 0 0; 

のみ上部の角を丸くし、単独の下のものを残します。値の順番は、左上、右上、右下、左下です。

ここでは例です:http://jsfiddle.net/9sXWf/

+0

あなたのコードを正しくフォーマットする方法を知っていると思います。 –

+0

うん..いいえ、確かに。サンプルと再フォーマットされた答えを追加しました。 – Swader

関連する問題