Fix OBS Studio Browser Source White Border

This article explains how to resolve the issue where OBS Studio browser sources display a distracting white border or fringe around transparent web elements, alerts, or widgets. By adjusting a few specific settings within OBS Studio and applying targeted Custom CSS, you can eliminate these rendering artifacts and achieve clean, seamless transparency for your stream overlays.

Step 1: Toggle Hardware Acceleration

The most common cause of white borders or pixelated outlines around transparent browser sources is how your graphics card renders the Chromium Embedded Framework (CEF) used by OBS. Toggling hardware acceleration often resolves this rendering glitch.

  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-hand menu.
  4. Scroll down to the Sources section.
  5. Locate the option Enable Browser Source Hardware Acceleration.
  6. If it is checked, uncheck it. If it is unchecked, check it.
  7. Click Apply and then OK.
  8. Restart OBS Studio for the changes to take effect.

Step 2: Apply Custom CSS to the Browser Source

Sometimes the web element itself does not have its background transparency configured correctly, or the browser engine scales the element poorly, creating a white sub-pixel border. You can force correct rendering using Custom CSS.

  1. Double-click the problematic Browser Source in your OBS Sources list to open its properties.
  2. Scroll down to the Custom CSS text box.
  3. Replace the existing code or append the following CSS block to the bottom of the existing code:
body {
  background-color: rgba(0, 0, 0, 0) !important;
  margin: 0px auto;
  overflow: hidden;
}

img, video, iframe {
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
}
  1. Click OK to save the changes. The backface-visibility: hidden; and -webkit-optimize-contrast properties force the browser engine to render edges more sharply, which frequently eliminates anti-aliasing artifacts like white fringes.

Step 3: Match OBS Color Settings

If the white outline persists, it may be due to color space mismatching, which affects how alpha channels (transparency) are blended.

  1. Open OBS Settings and navigate to the Advanced tab.
  2. Under the Video section, look at Color Space and Color Range.
  3. Set Color Space to Rec. 709.
  4. Set Color Range to Partial (sometimes labeled as Limited).
  5. Click Apply and OK.

Setting the color range to Full can occasionally cause transparency blending issues on certain hardware configurations, resulting in light-colored halos around transparent elements. Setting it to Partial ensures standard broadcast blending.