Is there a way to add border radius to Electron's <webview> tag? If not, is there a list of supported styles available?
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 https://i.sstatic.net/YjhS0.jpg
Upon reviewing the result, it appears that the border radius is only partially applied. The red border appears behind the webview, while the blue outline is in front. However, the webview itself seems to ignore the border radius, causing the content to extend beyond the specified radius.