After carefully crafting a rounded box/button and slicing its first corner, the middle bar (which repeats horizontally to adjust the width of the button text/content), and the last corner, I utilized the following markup:
<div id="left-corner"></div>
<div id="middle-bar">About Us</div>
<div id="right-corner"></div>
Each of these divs corresponds to images in the CSS and is floated to the left. Together, they form a seamless rounded button with the text "About Us," which looks great.
However, a new obstacle has arisen:
While I managed to create three slices of hover images, I am unsure how to implement the hover effect on these buttons without causing the corner images to also trigger the hover effect. One possible solution is to use fixed-width buttons and slice them entirely, but I prefer to avoid that route.