border-dotted-radius-zero.html 758 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>dashed border with radius</title>
  6. <style>
  7. .box {
  8. position: relative;
  9. width: 220px;
  10. height: 220px;
  11. }
  12. .mask {
  13. position: absolute;
  14. top: 0px;
  15. left: 0px;
  16. width: 220px;
  17. height: 220px;
  18. }
  19. div.border {
  20. border-style: dotted;
  21. border-width: 4px 0 4px 0px;
  22. width: 200px;
  23. height: 200px;
  24. border-top-right-radius: 40px 200px;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div class="box">
  30. <div class="border">
  31. </div>
  32. <img class="mask" src="border-dotted-radius-zero-filled-mask.png">
  33. </div>
  34. <div class="box">
  35. <div class="border">
  36. </div>
  37. <img class="mask" src="border-dotted-radius-zero-unfilled-mask.png">
  38. </div>
  39. </body>
  40. </html>