Question

I have collapsible sections created using jQuery UI Accordion. When each section is expanded I apply a background image to its header part like this:

jQuery UI Accordion Demo

If you look closely at the section headers, you will notice a gap at each rounded corner. Obviously the gaps will disappear if I remove the following CSS (but I’d like to use the image):

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;

Is there a way to use the image but remove the gaps at the same time?

Answer 1

Yeah, add a border radius to the element with the background on and match it to the radius of the header.

ie

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

If you really want to go to town

.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;
}