HTML Email Buttons not displaying background in Outlook Web (only button text visible)

Hello,

I’ve designed a responsive HTML email template that contains multiple buttons (e.g., “Pay Online”, “Check out what’s on”, “Learn about our New Sky Box”, etc.).

These buttons are styled using inline CSS like this:

<a href="#" 
   style="background-color: #D12B2F; 
   color: #ffffff;    
   padding: 12px 25px;    
   text-decoration: none;    
   border-radius: 15px;    
   font-weight: bold;    
   display: inline-block;    
   font-family: Arial, sans-serif;    
   font-size: 16px;    
   white-space: nowrap;">
  Pay Online 
</a>

The issue I’m facing is specific to Outlook Web (Outlook on the browser / Outlook.com): In Gmail (web), Outlook app on Android/iOS, and desktop mail clients, the buttons display perfectly — red/blue rounded rectangles with white text. But in Outlook Web, the button’s background color and border-radius are completely missing — only the button text (like “Pay Online”) is visible as a plain link. I’ve confirmed that:

• The email is fully inline-styled (no external CSS).
• The <a> tag uses inline background-color and display:inline-block properties.
• The issue persists even when simplified to a minimal example (just one button in a table cell).
• It’s not related to VML or conditional comments — the issue happens even in basic HTML-only layouts.
• It affects all colors (red, blue, etc.) and both filled and bordered buttons.
• There are no images or base64 styles applied to the buttons.

✅ Works fine in:

• Gmail (Web, Android, iOS)
• Outlook mobile app (Android, iOS)
• Apple Mail
• Yahoo Mail

❌ Fails in:

• Outlook Web (browser, part of Microsoft 365 / Outlook.com)

Expected Behavior: The buttons should render as rounded boxes with background color and white text, consistent across all email clients.

Actual Behavior in Outlook Web: Only the button text appears (as plain hyperlink text) — background color, padding, and border-radius are ignored or stripped out.

Questions for Microsoft Specialist:

• Does Outlook Web strip or ignore inline CSS properties like background-color, padding, or border-radius applied to <a> tags?
• Is this a known rendering limitation or a regression in the latest Outlook Web rendering engine?
• Are there specific CSS properties or attributes that Outlook Web requires to display buttons correctly (e.g., using mso-padding-alt, or wrapping buttons inside <td bgcolor>)?
• Is there any workaround or recommended pattern for bulletproof buttons that are supported by both Outlook Web and desktop/mobile Outlook apps?
• Could this behavior depend on whether the account is a Microsoft 365 corporate mailbox vs. Outlook.com free account?
• If this is a rendering engine issue, is there any plan or update that addresses support for inline button styling in Outlook Web?

Technical Context:

• Template uses only tables and inline styles (no <style> tags).
• Tested in Chrome and Edge (latest versions).
• Verified that HTML is well-formed and MIME type is text/html.
• Issue reproducible using a minimal sample (1 <a> tag inside <td>).