Crashes, No Sound, or Screen Glitches?
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteOutbyte Driver Updater · freeRandom freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.
Find the Right Drivers →ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
A facecam border is a digital graphic layered over a webcam feed to frame it within a stream scene. To use one in OBS, add your camera as a video source, place a transparent PNG border above it, and align the camera image with the border’s opening. You can make a custom frame, start with a template, or commission a design.
What is a facecam border?
A facecam border—also called a webcam overlay, webcam frame, or camera border—is artwork that decorates the area around your on-screen camera image. It is a scene graphic, not a physical bezel or camera accessory. OBS treats it as a separate source layered over the webcam feed; see the OBS Sources Guide.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
OBS Studio User Guide for Beginners: A Complete Step-by-Step Walkthrough for Live Streaming,... | $6.98 | Buy on Amazon |
A typical border has a transparent center, so the camera remains visible through the opening. The artwork might be a simple outline, a colored panel, rounded corners, or a frame with a channel name.
Choose a shape and size that fit your scene
Start with the camera layout you actually use. A border should match both the shape and the position of the camera image; there is no single resolution that fits every scene. Common formats include widescreen 16:9, 4:3, square, vertical 9:16, and circular frames.
For example, the siutil frame tool offers canvas presets of 1920×1080 for 16:9, 1440×1080 for 4:3, 1080×1080 for 1:1, and 1080×1920 for 9:16, as well as a circle. These are that tool’s presets, not universal streaming-platform requirements: siutil webcam frame tool.
Before exporting, check that the transparent opening is large enough for the visible camera area and that the border will not cover important parts of the image. If your webcam source is cropped or reshaped in OBS, size and position the graphic for that adjusted image rather than the camera’s original dimensions.
Make or choose a border
Create a custom frame
A browser-based or design tool gives you control over the shape, line style, thickness, corner radius, colors, gradients, and optional labels. The key requirement for a static border is a transparent center and a transparent PNG export. Check the tool’s export options before spending time on a design; transparency may depend on the tool or plan. Canva and Placeit are among the tools discussed in Design Hub’s July 31, 2023 guide, but that guide’s feature and pricing details are historical, not current buying advice: Design Hub’s webcam overlay guide.
Start with a template or pack
A ready-made template is a quicker starting point. Before choosing one, compare its style, file format, dimensions, customization options, license, and price. Design Hub’s guide also names Placeit and OWN3D as template sources; confirm current products and usage terms directly with the provider.
Commission a design
A commissioned frame can be tailored to a channel’s visual identity. Review a designer’s portfolio and agree on the deliverables, revisions, license, file format, and turnaround before ordering. Design Hub lists Fiverr as one possible marketplace, not as an endorsement of any seller.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Add a static PNG border in OBS
- Add the camera: In the scene’s Sources panel, select + and add a Video Capture Device. Choose the webcam and set its size and position in the preview.
- Add the border: Select + again and add an Image source. Choose the transparent PNG file.
- Put the border above the camera: In the Sources list, move the Image source above the Video Capture Device. Sources higher in the list appear over sources beneath them.
- Align the layers: Resize and position the camera and border so the visible camera image sits neatly inside the transparent opening. Adjust the frame or crop the camera source as needed; do not stretch either layer out of proportion.
- Lock the frame if useful: Once placement is right, lock the Image source in the Sources list to avoid moving it while adjusting other scene elements.
If the camera disappears, check that the Image source has a transparent opening, is above the camera in the list, and is not covering the opening with an opaque area. If the frame looks misaligned, check the two sources’ size, position, and any crop applied to the camera.
Make an animated border
Animation is a different workflow from a static PNG. The Bregvorn overlay maker describes an animated WebM with a green background: add it in OBS as a Media Source, enable looping, and apply a Chroma Key filter to remove the green. Those are instructions for that maker’s output, not a universal format rule; animation formats and support vary. See the Bregvorn overlay maker.
Free tools Windows power users keep installed
One-click scans. No signup required.
A still PNG does not become an animated border simply by being used as an image source. The siutil tool creates a still frame and suggests adding motion with OBS filters, which is a separate effect from exporting an animated graphic: siutil webcam frame tool.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
