How to achieve rounded corners?

[graceful whale]

i have enabled macosPrivateApi, disabled decorations and set transparency to true.
In my styles.css i have set

:root {
  border-radius: 40px;
}

but i seem to get this weird sharp corners around my rounded corners

[green vortex]

Have you tried using the window-shadows crate?

[graceful whale]

yes, isn't that just for windows?

im using macos

[green vortex]

It's both for Windows and macOS

[graceful whale]

but i tried it. it added shadow but it didn't add the corners

[green vortex]

Oh, I see

I haven't tested it on macOS

And it does provide rounder corners on Windows 11

[graceful whale]

it does. but it doesn't say anything about rounded corners on macos

[strong bolt]

We have the exact same setup for our app - works on windows 10 and macOS (last I tried) - check our index.html and this CSS file https://github.com/RedHawk989/EyeTrackVR/blob/SolidJSGUI/GUI/ETVR/src/styles/index.css

Essentially, put the root element and custom title bar in a wrapper div. Then, set the body to transparent. Apply rounding and color to the wrapper div.

Works without any rust or js shenanigans.

[green vortex]

Have you investigated using title bar style transparent on macOS?

Perhaps it will be sufficient for your needs

[green vortex]

You'll still need some JS though

For example to disable rounded corners when the app is maximized

[strong bolt]

you dont need JS for that

i am doing it purely in CSS

[green vortex]

Is there a CSS selector for when the app is maximized?

[strong bolt]

breakpoints ...

media queries

[green vortex]

Is there a way to make those work with various screen sizes?

[strong bolt]

That's how they work natively. That's the point in a media query.

[graceful whale]

a little unrelated to tauri but i don't have an index.html file. im using next js. so where should i add the wrapper div in that case?

[strong bolt]

you set certain css stiles based on window width and height

[bronze copper]

but that doesn't catch maximized windows, does it? Like you don't know how small or large my monitor is

[strong bolt]

no idea iam afraid - i don't use NextJS - but i was under the understanding that Next was a React framework - so you should have an index entry point

[strong bolt]

you have to set sane defaults based on known monitor sizes.

for example, how tailwind does it.

for example - most of my apps will only support up to 2560 x 1440, i could add support for more, but i haven't needed to yet.

[green vortex]

That's a pretty significant limitation

There are lots of users who might use 4K displays or widescreen

[bronze copper]

but that doesn't help with the rounded corners right? Like i have 2 monitors, one 1080p and one 1440p, so the window will always misbehave on at least one of them

[strong bolt]

No, you set media queries at common screen sizes between the lowest possible and your max supported.

would work fine on both monitors.

You can also use JS if you need to, for more granularity. My point was only that you don't need JS and that plenty of modern responsive design doesn't use JS at all.

lots of articles on it - here is a general one. https://css-tricks.com/optimizing-large-scale-displays/

Of course, in reactive frame works you can also create a JS function for handling rounded corners based on the tauri API -so lots of options. Just modify the wrapper divs border-radius CSS selector based on the maximised window state.

[graceful whale]

it still doesnt seem to work 😦
i still get this weird outer pointy corners
on all 4 corners

idk maybe im doing it wrong

[strong bolt]

use your devTools inspector to see what element that is.

[bronze copper]

don't get me wrong, media queries are great, but i don't see how they solve the problem "How to remove the rounded corners in maximized windows" without sideeffects. Like what happens if i have a 1080p window on my 1440p monitor? Then it would think it's maximized on a 1080p monitor and will remove the corners making it look weird on my larger monitor, right?

[bronze copper]

That could also be that one weird macos bug but the color should look a bit different iirc

[cerulean salmon]

also can't you make your window as big as your screen size without maximizing it

[strong bolt]

in css3 you have the screen selector for mediaqueries - so viewport percentages can be used - however you're right. If you want the right behaviour on all screens (without making assumptions) - JS is the only way. Mediaqueries only get you half way there.

[graceful whale]

its the body html tag. when i apply border radius to it, it doesn't work

[strong bolt]

you can't apply border radius to the body element

you have to make it transparent - and make the webView window itself transparent.

[graceful whale]

i have done that. the color outside the blue part is transparent only

[strong bolt]

well, without seeing your code i can only tke your word - and at your word - this is strange for sure. Fabian is probably right.

They would know more about this than me if it's a macOS bug

[graceful whale]

if it's not too much to ask, would u be able to hop on a call and make sure i did what u told me to lol. coz im not sure i did

[strong bolt]

not at the moment - but i might be able to later. I am on my way to work rn. Just procrastinating in here xD

[graceful whale]

lol suree. thank you so muchh

[strong bolt]

just to check - are you using any plugins for tauri?

The windows shadows plugin and the windows vibrancy plugin caused me a similar issue when i was first working on rounded corners. Though - iirc the windows shadows plugin doesn't support macOS well - would have to check that.

[bronze copper]

it does support macos well until you add rounded corners via css x)

[strong bolt]

well, that explains that xD

[graceful whale]

yeah im using those 2 plugins lol

[bronze copper]

oh then it's the vibrancy plugin you're seeing

[graceful whale]

omg yess. i removed the vibrancy plugin and it worked

so ig there is no way to have vibrancy + rounded corners? 😅

[bronze copper]

You could try this suggestion ^

if that doesn't work then no, not yet. (on macos)

[graceful whale]

yeah i did that. didn't work

okay that's fine i suppose

[bronze copper]

In what way did it not work?

Like it didn't fulfill your needs or straight up didn't work?

ah Transparent would really not be that useful here, Overlay may be better unless you want to get rid of the window controls too

[graceful whale]

i did .titlebar {background-color: transparent } and it showed the same sharp corners (like the screnshots i posted)

[bronze copper]

We're talking about the tauri config: https://tauri.app/v1/api/config#titlebarstyle

[graceful whale]

oh yes. i did that too. same result

it was transparent all along

anyway i have decorations off

[bronze copper]

The reason i asked if titlebarstyle overlay worked is that vibrancy should work too then because the rounded corners would still be the native ones

[graceful whale]

so, with decorations true, titlebar: Overlay, this is how it looks:

[bronze copper]

so the default corners are not round enough for you? That's fair 👍

[graceful whale]

they would be okay. but i dont want tile bar. when i disable titlebar with decorations: false, the corners become sharp again

[bronze copper]

but i dont want tile bar
alrighty

[graceful whale]

coz im trying to make an app like spotlight/ raycast

unless there is a way to make the tilebar completely invisble with no traffic lights and such, while also keeping decorations on?

[bronze copper]

not with this config no