How to Create Custom OBS Borders with Color Source

In this guide, you will learn how to utilize the “Color Source” feature in OBS Studio to quickly create custom aspect ratio borders for your webcam, gameplay capture, or overlays. By the end of this article, you will understand how to add, resize, and position solid color blocks to frame your sources perfectly without needing external graphic design software.

Step 1: Add your Media Source

Before creating the border, ensure the source you want to frame (such as your webcam or gameplay capture) is already added to your scene. 1. Go to the Sources dock. 2. Click the + (plus) icon and select your source (e.g., Video Capture Device). 3. Position it on your canvas.

Step 2: Create the Color Source

The “Color Source” acts as the solid background that will peek out from behind your feed to create the border effect. 1. Click the + icon in the Sources dock. 2. Select Color Source and give it a name (e.g., “Webcam Border”). Click OK. 3. In the properties window, click Select Color to choose your border color. 4. Set the Width and Height to match or exceed your source’s aspect ratio. (For example, if your webcam is 1920x1080, set the Color Source to 1940x1100 to allow for a 10-pixel border on all sides). Click OK.

Step 3: Layer the Sources

To make the Color Source look like a border, you must place it behind your main video source. 1. In the Sources list, locate your newly created Color Source. 2. Click and drag it directly underneath your video source. 3. You will now see the color block layer behind your video.

Step 4: Align and Adjust the Border Thickness

You can fine-tune the size of the border directly on the OBS canvas. 1. Select your video source on the canvas. 2. Hold the Alt key (on Windows) or Option key (on Mac) while dragging the red bounding box handles to crop your video source to any custom aspect ratio (such as a square 1:1 or vertical 9:16). 3. Select your Color Source and use the red transform handles to resize it until it is slightly larger than your cropped video source, creating an even border around the edges. 4. For precise alignment, select both sources, right-click, go to Transform, and use alignment tools, or manually nudge them using the arrow keys on your keyboard.

Step 5: Group the Sources

To prevent the border and the video source from shifting out of alignment when you move them: 1. Hold Ctrl (Windows) or Cmd (Mac) and click both the video source and the Color Source in the Sources dock. 2. Right-click the highlighted sources and select Group Selected Items. 3. Name the group (e.g., “Webcam with Border”). You can now move, resize, or scale the entire group as a single unit while maintaining your custom aspect ratio border.