buttonset buttons overlap slightly?

buttonset buttons overlap slightly?

I just got started using JQuery UI very recently, and had been using the dot-luv theme. I just set up a buttonset and noticed that the buttons are slightly too close together. You can see what I'm talking about in the image below; the right border on button 1 is hidden behind button 2, whereas when button 3 is active it shows a border all the way around. 


Am I doing something wrong here? I also tried this with the dark-hive theme and it behaved similarly. Adjusting margin-right pushes things unevenly, so if I set it to be high enough that the borders don't overlap there's a visible gap between buttons 2/3. This is a pretty minor bug but its driving me nuts so I really appreciate any help you guys can give, and I'm happy to give more detail if needed!

Here's my HTML : 
  1. <div id="mode-radio" style="position:absolute;top:17px;left:200px;">
  2.             <input type="radio" id="radio1" name="mode-radio"><label for="radio1">Button 1</label></input>
  3.             <input type="radio" id="radio2" name="mode-radio" checked="checked"><label for="radio2">Button 2</label></input>
  4.             <input type="radio" id="radio3" name="mode-radio"><label for="radio3">Button 3</label></input>
  5.         </div>