Search code examples
rounded-cornersnode-webkit

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!

Solution

  • 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.