diff --git a/Base/res/html/misc/border-radius.html b/Base/res/html/misc/border-radius.html index 52b524f3a2..938189f25d 100644 --- a/Base/res/html/misc/border-radius.html +++ b/Base/res/html/misc/border-radius.html @@ -180,6 +180,29 @@ border: 1px solid black; background-color: transparent; } + + .nut { + width: 220px; + height: 180px; + background-size: 220px 180px; + border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; + background-image: url('old-computer.png'); + } + + .screenshot { + width: 100px; + height: 100px; + border-radius: 50%; + background-image: url("serenity-screenshot.png"); + } + + .rounded-image { + background-image: url("90s-bg.png"); + background-repeat: repeat; + border-radius: 20px; + width: 150px; + height: 100px; + } @@ -239,6 +262,18 @@

+

These boxes have (rectangular) background images, that are clipped by the border radius

+ In a nutshell +
+
+ In a circle +
+
+ Rounded +
+
+
+

The boxes are 50x50px

All round 10px
diff --git a/Base/res/html/misc/old-computer.png b/Base/res/html/misc/old-computer.png new file mode 100644 index 0000000000..9dcee69390 Binary files /dev/null and b/Base/res/html/misc/old-computer.png differ