nested-boxes-with-hidden-overflow-and-border-radius.html 679 B

123456789101112131415161718192021222324252627282930
  1. <!DOCTYPE html>
  2. <link rel="match" href="reference/nested-boxes-with-hidden-overflow-and-border-radius-ref.html" />
  3. <style>
  4. .outer {
  5. overflow: hidden;
  6. border-radius: 100px;
  7. background-color: magenta;
  8. width: 500px;
  9. height: 500px;
  10. }
  11. .middle {
  12. overflow: hidden;
  13. border-radius: 50px;
  14. transform: translate(10px, 10px);
  15. background-color: lawngreen;
  16. }
  17. .inner {
  18. width: 100px;
  19. height: 100px;
  20. background-color: black;
  21. transform: translate(10px, 10px);
  22. }
  23. </style>
  24. <div class="outer">
  25. <div class="middle">
  26. <div class="inner"></div>
  27. </div>
  28. </div>