border-bottom attribute on span affects all borders of the respective element in outlook365

Question

My company is using Adobe dreamweaver to generate HTML emails, and oftentimes it doesnt work or provide the features desired. So I have to step in and make the HTML-Emails work at least in our Office365 environment...

However, to the point: Above some text, a green line/border shall be displayed. So I went into the sourcecode, looked up the containing element and added a span tag around the word supposed to have a green top-border. Then I added

style="border-top: 5px solid green"

And when I insert the HTML Code into an email, I get the display of a word being completely surrounded by green borders, not just a green top border.

The span tag resides within b tags, and the b tages are inside a td and so on. Nothing special in my opinion.

i already tried working around this by using other elements that span, but it didnt work. Oftentimes it seems as if Outlook doesnt even recognize the tags.

display: inline

also didnt have any effect on div element, which I had high hopes for since at least there, the border-top activated only the top border, not all borders around it. But unfortunately, its not inline...^^

Any experienced HTML-Email designers out there who would have some advice or two?

EDIT: Part of the markup

                        <td height="100" bgcolor="#EFEFEF" class="inner" style="border-left-color: #000000:; border-left: thin; padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px; font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal;">
                            <table width="547" bgcolor="#ffffff">
                            <tr>
                            <td width="539" height="40" bgcolor="#ffffff" class="inner" style="padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px; font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal;"> <b><span style="border-top: 5px solid green;">TEST</span> - blablabla</b>
                              </tr>
                            </table>
                        </td>

Answer 1

I wouldn't use a Span tag to do this. You need a block element to add a border to (e.g. div / td). I would suggest utilizing tables and table cells. It'll be your best way to add the border in a way that is supported everywhere and keep everything looking nice, no matter the email client quirks.

See my edits below:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
    <tr>
    	<td height="100" bgcolor="#EFEFEF" class="inner" style="border-left-color: #000000:; border-left: thin; padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px; font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal;">
            <table width="547" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td bgcolor="#ffffff" class="inner" style="padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px;">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                	<table align="left" border="0" cellspacing="0" cellpadding="0" style="width:auto;">
                                        <tr>
                                            <td style="font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal; border-top: 5px solid green; padding-top:3px;">
                                                <b>TEST</b>
                                            </td>
                                        </tr>
                                    </table>
                                    
                                	<table align="left" border="0" cellspacing="0" cellpadding="0" style="width:auto;">
                                        <tr>
                                            <td style="font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal; border-top: 5px solid #ffffff; padding-top:3px;">
                                                <b>- blablabla</b>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>