css - ログインボックスのデザイン

Question

ここにjsfiddleの例があります。

この例では、「JOIN US」リンクの境界線とログインボックスの境界線を重ねて、ユーザーが「JOIN US」リンクをクリックすると、ログインボックスが表示され、1つのボックスのように見えるようにします。

私が設定した：

border-bottom : white 

「JOINUS」リンクにありますが、重複して表示されませんでした。一つ、必要があるので「z-index」を削除できません。

Answer 1

border.nav1クラスにタグを使用する代わりに、2つの別々border-topのandまたは省略形を使用しますが、 orプロパティborder-bottomは使用しないでください。これが私のjsFiddleですborder-rightborder-left

Answer 2

丸みを帯びたエッジの場合、CSSプロパティcalがありborder-radiusます。使用するだけelement_id/class/name:hover { border-radius: 10px; }で完了です。新しいCSS3タグと機能をご覧になることをお勧めします。