<style>
   .test {
     color: white;
     font: 18px serif;
     height: 100px;
     overflow: auto;
   }
 </style>
 <polygon points="5,5 195,10 185,185 10,195" />
 <foreignObject x="20" y="20" width="160" height="160" style="border: 10px solid blue">

     Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 </foreignObject>

I don't know if this is the only style that doesn't work. I used this code from MDN to test it : https://codepen.io/Supersudo/pen/MWYYeba <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <style> .test { color: white; font: 18px serif; height: 100px; overflow: auto; } </style> <polygon points="5,5 195,10 185,185 10,195" /> <foreignObject x="20" y="20" width="160" height="160" style="border: 10px solid blue"> <div xmlns="http://www.w3.org/1999/xhtml" class="test"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </foreignObject> </svg> Firefox doesn't display the blue border around the div while chromium does.