How to Fix OBS Browser Source Jagged Edges

If your OBS Studio browser sources—such as stream overlays, alerts, or chat boxes—are rendering with pixelated or jagged edges instead of smooth anti-aliasing, it is usually caused by a conflict in hardware acceleration, incorrect scaling, or default browser rendering behavior. This article provides a direct, step-by-step guide to resolving this issue by enabling hardware acceleration, adjusting OBS scaling, applying custom CSS, and configuring your graphics card settings.

Step 1: Enable Browser Source Hardware Acceleration

The most common cause of jagged edges is that OBS is rendering the browser source using CPU emulation instead of your graphics card. Enabling GPU acceleration allows the browser source to use proper anti-aliasing.

  1. Open OBS Studio.
  2. Go to File > Settings (or click Settings in the bottom-right Controls dock).
  3. Click on the Advanced tab in the left-hand menu.
  4. Scroll down to the Sources section.
  5. Check the box that says Enable Browser Source Hardware Acceleration.
  6. Click Apply and then OK.
  7. Restart OBS Studio for the changes to take effect.

Step 2: Set the Correct Source Resolution

Scaling a browser source manually in the OBS preview window can bypass the browser’s native anti-aliasing, resulting in blurry or jagged edges.

  1. Right-click the problematic browser source in your Sources list and select Properties.
  2. Instead of resizing the red border in the preview window, enter the exact Width and Height that your widget or overlay was designed for (e.g., 1920 for Width and 1080 for Height).
  3. Click OK.
  4. If you need to resize it on your screen, right-click the source, go to Transform, and select Reset Transform first, then scale it minimally.

Step 3: Apply Custom CSS to Force Smooth Rendering

You can force the underlying Chromium browser in OBS to render text and images with anti-aliasing by adding custom CSS directly to the source.

  1. Right-click your browser source and select Properties.
  2. Scroll down to the Custom CSS text box.
  3. Paste the following code at the bottom of the existing CSS:
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

Note: The translate3d and backface-visibility properties force the browser engine to utilize GPU 3D rendering, which naturally applies anti-aliasing to jagged edges.

Step 4: Disable Global FXAA in Graphics Card Settings

Sometimes, global 3D settings in your graphics card control panel conflict with OBS, causing text and thin lines to render with pixelated artifacts.

For NVIDIA Users: 1. Right-click your desktop and open the NVIDIA Control Panel. 2. Go to Manage 3D Settings > Program Settings. 3. Click Add and select OBS Studio (obs64.exe) from the list. 4. Locate Antialiasing - FXAA and set it to Off. 5. Locate Antialiasing - Mode and set it to Application-controlled. 6. Click Apply and restart OBS.