Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to apply rounded corners to window in node-webkit?

I can't apply rounded corners for frameless window in my desktop app. Adding border-radius property to html or body tags does not help.

I'm using latest node-webkit prebuilt binary (v0.8.4) for Windows.

I wish to place an iPad image as a window, but white background at all corners deface application. I hope someone has already faced with that problem and found a solution.

Thanks in advance!

like image 701
pantekx3 Avatar asked Feb 14 '23 05:02

pantekx3


1 Answers

Thanks to a recent update, that shipped in node-webkit 0.11.2, it's now possible.

You can make the node-webkit window transparent by adding transparent: true under the window section of your package.json file. Another optional addition would be frame: false which will remove the default OS header as well as hide the node-webkit toolbar.

Now that you have a transparent window you can emulate rounded corners. Depending on your code you'll have to add a border-radius to elements that affect the edge of your window.

The simplest way to emulate a bare-bones rounded window is by adding a border-radius to your html tag, with a background-color applied to your body tag.

like image 168
Huriachi Avatar answered May 08 '23 17:05

Huriachi