outline-radius-percent-1-ref.html 1.1 KB

12345678910111213141516171819202122232425262728
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. outline-width: 10px; outline-style: solid;
  7. width: 400px; height: 50px;
  8. margin: 20px 0;
  9. border-style: solid; border-color: transparent; border-width: 0;
  10. padding: 0;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div style="-moz-outline-radius: 20px / 2.5px;"></div>
  16. <div style="-moz-outline-radius: 40px / 5px;"></div>
  17. <div style="-moz-outline-radius: 80px / 10px;"></div>
  18. <div style="padding: 0 100px; -moz-outline-radius: 60px / 5px;"></div>
  19. <div style="padding: 0 100px 0 0; -moz-outline-radius: 50px / 5px;"></div>
  20. <div style="padding: 0 0 0 100px; -moz-outline-radius: 50px / 5px;"></div>
  21. <div style="border-width: 0 100px; -moz-outline-radius: 60px / 5px;"></div>
  22. <div style="border-width: 0 100px 0 0; -moz-outline-radius: 50px / 5px;"></div>
  23. <div style="border-width: 0 0 0 100px; -moz-outline-radius: 50px / 5px;"></div>
  24. <div style="border-width: 0 100px; padding: 0 100px;
  25. -moz-outline-radius: 80px / 5px;"></div>
  26. </body>
  27. </html>