1) create 3 radiobuttons positioned horizontally.
2) the radio buttons are to be connected by horizontal lines.
3) on selecting a radio button an event shall be activated to carry out some functionality.
4) the radio button labels are to be positioned below the radio buttons.
5) the html needs to be cross-browser compatible (mainly firefox, chrome).
Please can you advise on the html to be used to carry out this functionality?
That's an unusual requirement. If I had to do it, I'd likely try positioning a div behind the radio buttons and use the bottom border to achieve the line. Getting it to line up perfectly with the center of the radio buttons, especially across all browsers, is likely to be, er, interesting.
Trying the same with an hr element might be another approach.