Search code examples
htmlcsswebviewelectron

Electron WebView CSS Border Radius

Does Electron's <webview> tag support having a border radius? If not, is there a reference to which styles are supported?

HTML

<body>
    <aside>

    </aside>
    <main>
        <webview id="view" src="https://www.microsoft.com/en-gb"></webview>
    </main>
</body>

CSS

body {
    min-height: 100vh;
    min-width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

aside {
    min-width: 88px;
}

main {
    flex: 1;
    box-sizing: border-box;
    padding: 8px 9px 9px 0px;
}

#view {
    height: 100%;
    width: 100%;
    border-radius: 16px;
    border: 1px solid red;
    outline: 1px solid blue;
}

Result Electron WebView Border Radius

As can be seen from the result, the border radius is technically applied, since the red border falls behind the webview. In contrast, the blue outline falls in front of the webview, however the border radius seems to be ignored by the webview itself, leaving the context hanging outside the bounds of the radius.

Solution

  • This isn't specific to electron / using a webview - with any run-of-the-mill iframe, you would have the same issue. These are effectively "window" instances, and those do not adhere to a border-radius on the parent container by default, but "break out" of that.

    Adding overflow: hidden to #view should solve it.