Problems with window customization's rounded corners and shadows

[sessionboy]

Describe the bug

Because tauri does not support the extension of native windows, I have to manually implement custom windows. I tried to simulate macos' window implementation and expand on it, such as menus, tabs, and titles. I implemented some basic functions through the tauri-controls library, but there are still some issues.

1. Incomplete implementation of rounded corners

To support rounded corners, I made some settings:

"windows": [
      {
        "title": "myapp",
        "shadow": true,
        "width": 1000,
        "height": 700,
        "fullscreen": false,
        "center": true,
        "transparent": true,
        "decorations": false,
        "resizable": true
      }
 ],

and then (styles.css):

:root {
    border-radius: 12px;
    ...
}
body{
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

The final effect:

Obviously, the corners on the top left and top right are not rounded. The background seems to be transparent, but it still has a border that affects the implementation of rounded corners. How can I fix it?

2. Shadow enhancement

I want to make some modifications to the shadow to enhance it. How can I do that?

About tauri v2, I hope the official can provide a complete case of customizing windows, including simulating native windows, as well as customizing menus, tabs, titles, and other features.

Reproduction

No response

Expected behavior

No response

Full tauri info output

nothing

Stack trace

No response

Additional context

system: macOS monterey version: 12.6 tauri version:

tauri = { version = "2.0.0-beta.13", features = ["macos-private-api"] }
tauri-plugin-os = "2.0.0-beta.3"
tauri-plugin-shell = "2.0.0-beta.3"

{
   "@tauri-apps/api": "v2.0.0-beta.6",
    "@tauri-apps/plugin-os": "2.0.0-beta.2",
    "@tauri-apps/cli": "2.0.0-beta.11"
}

[benjamingorman]

Also have the same problem. Interested in the solution to this!

[KJohnson82]

I've been fighting this issue for a day and a half, no joy so far, hopefully someone here can help

[nianyi778]

我i也很感兴趣

[kodgurkini]

For anyone still searching for a solution to this, set "shadow": false

[KJohnson82]

For anyone still searching for a solution to this, set "shadow": false

Can you give a little more information, please?

[kodgurkini]

Absolutely, in the tauri.conf.json, or as you create a new window, you can set window properties like:

"windows": [ { "height": 300, "width": 240, "title": "Title of your app", "decorations": false, "transparent": true, "shadow": false } ],

Adding the "shadow": false here removes the border-looking-shadow around the app. Don't forget to set body bg to transparent etc. Hope that helps!

[KJohnson82]

Absolutely, in the tauri.conf.json, or as you create a new window, you can set window properties like:

"windows": [ { "height": 300, "width": 240, "title": "Title of your app", "decorations": false, "transparent": true, "shadow": false } ],

Adding the "shadow": false here removes the border-looking-shadow around the app. Don't forget to set body bg to transparent etc. Hope that helps!

Ah okay, I think that is a feature of 2.0, my app will need to stay on 1.0 for a little while as I need to support windows 7, I will check on the CSS and tailwind to make sure shadows are not an issue and that might fix the problem. Thanks for the help!

[tzfun]

I encountered the same problem, which only occurs on Windows platform and after using set_shadow. My tauri version is v1. After removing the dependency on set_shadow, it is fine. It seems that it is caused by setting the window shadow. Unfortunately, I can only give up the rounded corners and references. I hope the tauri team can fix this problem.

[xiaoyan2015]

This is how I implemented it。

[JiuRanYa]

I got the same problem. The solution above seems not work.

[Schachte]

I have this working on Mac.. maybe give this a shot @JiuRanYa

Example:

tauri.conf.json

  "app": {
    "macOSPrivateApi": true,
    "windows": [
      {
        "label": "swip-swap",
        "title": "swip-swap",
        "width": 800,
        "height": 50,
        "resizable": true,
        "fullscreen": false,
        "decorations": false,
        "transparent": true,
        "shadow": false
      }
    ],
    "security": {
      "csp": null,
      "capabilities": [
        {
          "identifier": "draggable-window",
          "windows": ["*"],
          "permissions": ["core:window:allow-start-dragging"]
        }
      ]
    }
  },

index.css

body {
  margin: 0;
  display: flex;
  place-items: center;
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

.drag-wrapper {
  display: flex;
  width: 100%;
}

#root {
  padding: 1rem;
  border-radius: 50px;
  height: 100vh;
  background-color: #f3f3f3;
  border-radius: 5px;
  width: 100%;
  height: 100%;
}

[JiuRanYa]

@Schachte First at all, so Appreciated for your reply.

But I'm using tauri v2.0.0, I tried your code, but seems not work. I got this:

[Thund3rD3v]

I believe you have to clip overflow