Configuring StreamUP Squircle per Corner
by Andi
Version: 1.3.0
Same idea as the single-radius Squircle, but each corner gets its own radius and squircleness. Useful for asymmetric shapes: chat bubbles with one square corner, tabs that round only at the top, lower thirds with a rounded right edge.
Also supports inset, border, drop shadow and inverse cutout.
Requires the obs-shaderfilter plugin (v2.6.0 or newer).
Installation
- Download
streamup-squircle-per-corner.shader - Drop it into your obs-shaderfilter shaders folder (or anywhere you like, you point at it manually)
- In OBS, right-click the source you want to mask, Filters, add a Shader Filter under Effect Filters
- Hit Browse next to "Shader Text File" and pick the .shader file
- Done. The properties panel fills with all the controls below
Works on any source. Cameras, browsers, images, scenes, group sources.
How It's Built
Same superellipse SDF as the single-radius shader, but the radius and squircleness are looked up per quadrant. The shader checks which corner the pixel sits closest to and uses that corner's values to draw the curve. Branchless inside the shader, so the per-corner picks cost nothing on the GPU.
- n = 2 is a perfect circle / ellipse corner
- n = 3 is the Apple squircle
- n = 100+ is effectively a hard square corner
Edge softness adds anti-aliased feathering on top so corners stay clean at any size.
Information
Two info widgets at the top. Usage and version. Nothing to set.
Per-Corner Controls
Each corner has the same two sliders: a radius (px) and a squircleness (n). They sit in their own collapsible groups.
Top-Left Corner
- Radius (px) how rounded the top-left corner is. 0 is square
- Squircleness 2 is circle, 3 is Apple squircle, higher moves toward a square
Top-Right Corner
- Radius (px) same as above, for the top-right
- Squircleness same as above, for the top-right
Bottom-Left Corner
- Radius (px) same as above, for the bottom-left
- Squircleness same as above, for the bottom-left
Bottom-Right Corner
- Radius (px) same as above, for the bottom-right
- Squircleness same as above, for the bottom-right
The shader auto-clamps each radius so it never exceeds half the smaller side. You can't break the shape by pushing a radius too far.
Inset
Shrinks the shape inside the source without resizing the filter.
- Inset Top (px) shrinks from the top edge
- Inset Bottom (px) shrinks from the bottom edge
- Inset Left (px) shrinks from the left edge
- Inset Right (px) shrinks from the right edge
All four default to 0 (shape fills the source).
Border / Outline
Optional outline along the squircle edge. Off by default.
- Enable Border toggle
- Position where the stroke sits relative to the edge:
- Inside stroke sits inside the shape
- Outside stroke sits outside the shape (needs canvas expansion to render past the source bounds)
- Centre stroke straddles the edge, half inside and half outside
- Border Width (px) thickness
- Border Color colour and alpha
Outside borders get clipped at the source edge by default. Use the canvas-expansion inputs above the shader (Expand Left / Right / Top / Bottom) to give the border room.
Drop Shadow
Optional shadow behind the shape. Off by default.
- Enable Drop Shadow toggle
- Offset X / Y (px) where the shadow sits. Positive X = right, positive Y = down
- Blur (px) softness
- Shadow Color colour and alpha
- Opacity overall strength
Same canvas-expansion rule as outside borders.
Mode
- Inverse (cutout) flips the mask. The shape becomes a transparent hole through the source instead of the only visible part
Miscellaneous Controls
- Edge Softness (px) anti-aliasing width on the shape edge. Defaults to 3px
Recipes
A few starting points to copy.
Chat Bubble (Tail Bottom-Left)
- Top-Left: 40px, n=3
- Top-Right: 40px, n=3
- Bottom-Right: 40px, n=3
- Bottom-Left: 0px, n=2
Three rounded corners and one square. Square corner is the "tail" of the bubble.
Tab (Rounded Top, Square Bottom)
- Top-Left: 30px, n=3
- Top-Right: 30px, n=3
- Bottom-Left: 0px, n=2
- Bottom-Right: 0px, n=2
Classic tabbed-card shape. Sits flush against the panel below.
Sloped Card (Diagonal Asymmetry)
- Top-Left: 60px, n=3
- Top-Right: 0px, n=2
- Bottom-Left: 0px, n=2
- Bottom-Right: 60px, n=3
Two opposite corners rounded, two square. Reads as a slanted shape.
Camera Frame with Notch (Bottom-Right Square)
- Top-Left: 80px, n=3
- Top-Right: 80px, n=3
- Bottom-Left: 80px, n=3
- Bottom-Right: 0px, n=2
Round the camera but leave one corner square to anchor it against a UI element.
Pill Shape (Tall)
- All four corners: half the source width, n=2
Top and bottom semicircles, vertical sides. Works for a tall avatar plate.
Performance Notes
- The per-corner lookup is branchless. The shader picks the corner using
step()andlerp(), so there's no GPU divergence. Cost is identical to the single-radius shader - Border, drop shadow, and inverse all branch on uniforms, not pixels, so disabling them costs nothing
- Drop shadow does a second SDF evaluation, same as the single-radius shader
Good to Know
- All four corners share the same border width, edge softness, and shadow settings. The per-corner controls are radius and squircleness only
- The shape respects the source's original rectangle even on an expanded canvas. Inset, border, and shadow all measure from the source bounds, not the expanded canvas bounds
- File watching is on by default in obs-shaderfilter. Edit the .shader file and OBS updates live
Changelog
v1.3.0
- Added Inset Top / Bottom / Left / Right. Shrinks the shape inside the source without resizing the filter
- Added Border toggle with Inside / Outside / Centre positioning, width and colour
- Added Drop Shadow toggle with offset, blur, colour, opacity
- Added Inverse cutout mode. Shape becomes a hole instead of a mask
v1.2
- Anti-aliasing on the shape edge, derived from fwidth so it stays sharp at any size
v1.1
- Added tooltips on every control
v1.0
- First release. Per-corner squircle mask with independent radius and squircleness on each of the four corners, plus edge softness