How to Fix Jagged Browser Source Edges in OBS

If your OBS Studio browser sources—such as overlays, alerts, or chat widgets—are rendering with pixelated, jagged, or aliased edges instead of smooth lines, you are likely dealing with a hardware acceleration issue, improper scaling, or CSS rendering limitations. This article provides a direct, step-by-step troubleshooting guide to resolve this visual bug. By adjusting OBS settings, applying custom CSS, and choosing the correct scaling filters, you can restore crisp, clean, and anti-aliased graphics to your stream.

Step 1: Enable Browser Source Hardware Acceleration

The most common cause of jagged edges in OBS browser sources is disabled GPU acceleration. When disabled, OBS uses software rendering, which struggles to apply anti-aliasing to web graphics.

  1. Open OBS Studio.
  2. Go to Settings (located in the bottom-right corner or under the File menu).
  3. Click on the Advanced tab in the left sidebar.
  4. Scroll down to the Sources section.
  5. Check the box next to Enable Browser Source Hardware Acceleration.
  6. Click Apply and then OK.
  7. Restart OBS Studio to apply the changes.

Step 2: Set the Correct Base Resolution

If your browser source is rendered at a small resolution and then stretched manually in your OBS canvas, the pixels will become blocky and jagged.

  1. Right-click on your browser source in the Sources dock and select Properties.
  2. Set the Width and Height to match the native resolution of the widget or website you are displaying (for example, 1920x1080 for a full-screen overlay).
  3. Click OK.
  4. Avoid stretching the source frame manually in the preview window. If you must resize it, use the scaling filter method below.

Step 3: Change the Scale Filtering Method

If you must resize a browser source on your OBS canvas, the default scaling algorithm can sometimes cause aliasing. You can force OBS to use a higher-quality scaling filter.

  1. Right-click your browser source in the Sources list.
  2. Hover over Scale Filtering.
  3. Select Bicubic (sharp, but smooth) or Lanczos (sharpest, but uses slightly more resources). Avoid using “Point” or “Bilinear,” as these cause severe pixelation.

Step 4: Inject Custom CSS to Force Antialiasing

Some browser sources require specific CSS properties to force the Chromium engine to render edges smoothly. You can inject these directly into the source.

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

Note: The transform and backface-visibility properties force the browser source to use GPU 3D acceleration, which naturally smooths out jagged edges.

Step 5: Adjust Windows High DPI Settings

If you are using a high-resolution monitor (like 1440p or 4K) with Windows display scaling active, it can cause OBS’s internal browser to scale improperly.

  1. Right-click the OBS Studio shortcut on your desktop and select Properties.
  2. Go to the Compatibility tab.
  3. Click Change high DPI settings.
  4. Check Override high DPI scaling behavior.
  5. Set the drop-down menu for “Scaling performed by:” to Application.
  6. Click OK, then Apply.