To achieve rounded corners on multiple blocks using a single image above, I am opting for the use of images instead of plugins for maximum compatibility. This involves creating wrappers around the blocks to apply the corner images:
<div class="wrapper-4"> <!-- top-left corner -->
<div class="wrapper-3"> <!-- top-right corner -->
<div class="wrapper-2"> <!-- bottom-left corner -->
<div class="wrapper-1"> <!-- bottom-right corner -->
<div class="content"> <!-- Content Block -->
Feeling a bit cramped here!
</div>
</div>
</div>
</div>
</div>
It may not be the prettiest solution, but it seems like the only feasible way. Employing jQuery to create these wrappers could improve the aesthetics. Can someone assist in comprehending how to implement CSS around these divs and images with the sliding doors technique? Ensuring that the corners display properly, particularly in IE, is crucial. While I have experience creating buttons using sliding doors, this situation is new to me.
Any guidance would be greatly appreciated. Thank you!