How to set the corner radius of webview2 in WPF Window

Question

In a Window of my WPF application, I have added a webview2 and trying to make its border rounded.

<Window x:Class="Webview2Experiment.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Webview2Experiment"
    xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="400"
    WindowStyle="None"
    AllowsTransparency="True"
    Background="Transparent">
<Border Background = "White"
        Opacity = ".01"
        Margin="0,0,0,0"
        Width="400"
        CornerRadius="22">
    <wv2:WebView2 Name = "webView2" 
                  Width="400"
                  Height="450"
                  />
</Border>

Setting the cornerRadius property of the Border did not help. Though the Border was rounded, the webview content was visible around the sharp corners.

I also tried setting the cornerRadius in the parent Window and clipping the content within the Window and also in the Border. Every time the container was rounded but the web content was visible around sharp edges.

So, is it possible to achieve the desired effect from the WPF client-side, and how to do this?

Answer 1

Seems to be not supported for now. Maybe you can open a feature request pointing to this comment .