jQuery UI - アコーディオンの丸いコーナーでギャップを削除するには

Question

jQuery UI Accordionを使用して折りたたみ可能なセクションを作成しました。各セクションが展開されている場合、私はこのようにそのヘッダ部分に背景画像を適用します。

jQuery UI Accordion Demo

あなたはセクションヘッダをよく見ると、あなたがそれぞれの丸みを帯びたコーナーでギャップに気づくでしょう。もちろん、私は次のCSSを削除する場合はギャップが消えます（しかし、私は、画像を使用したいと思います）：

background: url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/images/ui-bg_glass_85_dfeffc_1x400.png") repeat-x scroll 50% 50% #DFEFFC; 

画像を使用するが、同時にギャップを削除する方法はありますか？

Answer 1

ええ、背景のある要素にボーダー半径を追加し、ヘッダーの半径に一致させます。

border-top-left-radius: 6px; 
border-top-right-radius: 6px; 

つまり、あなたが本当にええ、これは完璧です町

.ui-accordion .ui-accordion-header a { 
    border-radius: 6px; 
} 

.ui-accordion .ui-accordion-header.ui-state-active a { 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
}