Implement rounded window corners

6 files changed, 86 insertions, 0 deletions

diff --git a/wiki/Configuration:-Window-Rules.md b/wiki/Configuration:-Window-Rules.md
index 289f1b1c..6cdb2320 100644
--- a/wiki/Configuration:-Window-Rules.md
+++ b/wiki/Configuration:-Window-Rules.md
@@ -59,6 +59,9 @@ window-rule {
         // Same as focus-ring.
     }
 
+    geometry-corner-radius 12
+    clip-to-geometry true
+
     min-width 100
     max-width 200
     min-height 300
@@ -378,6 +381,77 @@ window-rule {
 }
 ```
 
+#### `geometry-corner-radius`
+
+<sup>Since: 0.1.6</sup>
+
+Set the corner radius of the window.
+
+On its own, this setting will only affect the border and the focus ring—they will round their corners to match the geometry corner radius.
+If you'd like to force-round the corners of the window itself, set `clip-to-geometry true` in addition to this setting.
+
+```
+window-rule {
+    geometry-corner-radius 12
+}
+```
+
+The radius is set in logical pixels, and controls the radius of the window itself, that is, the inner radius of the border:
+
+![](./img/geometry-corner-radius.png)
+
+Instead of one radius, you can set four, for each corner.
+The order is the same as in CSS: top-left, top-right, bottom-right, bottom-left.
+
+```
+window-rule {
+    geometry-corner-radius 8 8 0 0
+}
+```
+
+This way, you can match GTK 3 applications which have square bottom corners:
+
+![](./img/different-corner-radius.png)
+
+#### `clip-to-geometry`
+
+<sup>Since: 0.1.6</sup>
+
+Clips the window to its visual geometry.
+
+This will cut out any client-side window shadows, and also round window corners according to `geometry-corner-radius`.
+
+![](./img/clip-to-geometry.png)
+
+```
+window-rule {
+    clip-to-geometry true
+}
+```
+
+Enable border, set `geometry-corner-radius` and `clip-to-geometry`, and you've got a classic setup:
+
+![](./img/border-radius-clip.png)
+
+```
+prefer-no-csd
+
+layout {
+    focus-ring {
+        off
+    }
+
+    border {
+        width 2
+    }
+}
+
+window-rule {
+    geometry-corner-radius 12
+    clip-to-geometry true
+}
+```
+
 #### Size Overrides
 
 You can amend the window's minimum and maximum size in logical pixels.
diff --git a/wiki/examples/resize-custom-shader.frag b/wiki/examples/resize_custom_shader.frag
index 71710a9f..71710a9f 100644
--- a/wiki/examples/resize-custom-shader.frag
+++ b/wiki/examples/resize_custom_shader.frag
diff --git a/wiki/img/border-radius-clip.png b/wiki/img/border-radius-clip.png
new file mode 100644
index 00000000..7c41fd72
--- /dev/null
+++ b/wiki/img/border-radius-clip.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6246413f95e5aa2d63db3fc8bc7726e45af3d20a95ea8f66614f4d62fa7a6624
+size 34239
diff --git a/wiki/img/clip-to-geometry.png b/wiki/img/clip-to-geometry.png
new file mode 100644
index 00000000..1f57b013
--- /dev/null
+++ b/wiki/img/clip-to-geometry.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:88ca1517153755ee64b3fae4e67eced1f83873026ad1ad35c44b85f31fa8171d
+size 33591
diff --git a/wiki/img/different-corner-radius.png b/wiki/img/different-corner-radius.png
new file mode 100644
index 00000000..39818759
--- /dev/null
+++ b/wiki/img/different-corner-radius.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e420523fff7891335ef9af5410d946abdd468f1e1dad88e0c189a2b21c9bc7f3
+size 11099
diff --git a/wiki/img/geometry-corner-radius.png b/wiki/img/geometry-corner-radius.png
new file mode 100644
index 00000000..0cdee59d
--- /dev/null
+++ b/wiki/img/geometry-corner-radius.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3ed3d553cae8948726ab03db3bf4ad9ef2dc9cf4593e24a96fad9d8820af949d
+size 25777