Are you satisfied with the functionality of this?
var borderProps='2px solid #f00',borderRadius='5px',boxMeAttr='data-boxme';
var spans=document.querySelectorAll('span'),boxMeArrays=[],dummyArray=null,iterator=0;
var currSpan=null,prevSpan=null;
var i,length=spans.length,adjacentSpans=0;
for(i=0; i<length; i+=1){
prevSpan=currSpan;
currSpan=spans[i];
if(currSpan.hasAttribute(boxMeAttr)){
if(prevSpan!==null&&prevSpan.hasAttribute(boxMeAttr)){
dummyArray[dummyArray.length]=currSpan;
}else{
dummyArray=[currSpan];
boxMeArrays[iterator]=dummyArray;
iterator+=1;
}
}
}
length=boxMeArrays.length;
for(i=0; i<length; i+=1){
adjacentSpans=boxMeArrays[i].length;
for(var j=0; j<adjacentSpans; j+=1){
currSpan=boxMeArrays[i][j];
if(adjacentSpans>1){
if(j===0){
currSpan.innerText+=' ';
currSpan.style.borderLeft=currSpan.style.borderTop=currSpan.style.borderBottom=borderProps;
currSpan.style.borderTopLeftRadius=currSpan.style.borderBottomLeftRadius=borderRadius;
}else if(j===adjacentSpans-1){
currSpan.style.borderTop=currSpan.style.borderBottom=currSpan.style.borderRight=borderProps;
currSpan.style.borderTopRightRadius=currSpan.style.borderBottomRightRadius=borderRadius;
}else{
currSpan.innerText+=' ';
currSpan.style.borderTop=currSpan.style.borderBottom=borderProps;
}
}else{
currSpan.style.border=borderProps;
currSpan.style.borderRadius=borderRadius;
}
}
}
It's definitely a bit complex, but I believe it is scalable. Additionally, to enhance the borders' appearance by joining them neatly, an extra space using innerText is added within your HTML.
You can view and test this solution on jsFiddle. Let me know if there are any overlooked details, and I genuinely hope this method meets your requirements.