Adding rounded corners

[Mogh99 (Mohammed)]

Hi
I have a program that I want to remove the title bar of the window and add rounded corner.

My current approach is:

Gtk.Window.set_decorated(False)

Then use a .css file to add rounded corners

window {  
    border-radius: 30px;
}

This method works to add the rounded corner but a black background appears behind the window as shown below.

Any ways to fix this issue or work around to add rounded borders.

[ebassi (Emmanuele Bassi)]

Which version of GTK are you using?

Which platform and windowing system are you using?

[Mogh99 (Mohammed)]

I am using Gtk version 3.0 with xfce as the desktop environment

[ebassi (Emmanuele Bassi)]

You will need an X11 compositor running, and you will need to set the RGBA visual on your top level window:

• Gdk.Screen.get_rgba_visual
• Gtk.Widget.set_visual

[Hamza_Algohary]

Try this:
window.set_visual(window.get_screen().get_rgba_visual());

[Mogh99 (Mohammed)]

I tried the following example and it worked fine with gnome. But I didn’t worked successfully with xfce.

What should I check to make sure it would work in xfce.
Like X11, or xfwm version?

#!/usr/bin/env python3

import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk, Gdk
import cairo


supports_alpha = False


def screen_changed(widget, old_screen, userdata=None):
    global supports_alpha

    screen = widget.get_screen()
    visual = screen.get_rgba_visual()

    if visual is None:
        print("Your screen does not support alpha channels!")
        visual = screen.get_system_visual()
        supports_alpha = False
    else:
        print("Your screen supports alpha channels!")
        supports_alpha = True

    widget.set_visual(visual)


def expose_draw(widget, event, userdata=None):
    global supports_alpha

    cr = Gdk.cairo_create(widget.get_window())

    if supports_alpha:
        print("setting transparent window")
        cr.set_source_rgba(1.0, 1.0, 1.0, 0.0) 
    else:
        print("setting opaque window")
        cr.set_source_rgb(1.0, 1.0, 1.0)

    cr.set_operator(cairo.OPERATOR_SOURCE)
    cr.paint()

    return False


def clicked(window, event, userdata=None):
    # toggle window manager frames
    window.set_decorated(not window.get_decorated())


if __name__ == "__main__":
    window = Gtk.Window()
    window.set_position(Gtk.WindowPosition.CENTER)
    window.set_default_size(400, 400)
    window.set_title("Alpha Demo")
    window.connect("delete-event", Gtk.main_quit)

    window.set_app_paintable(True)

    window.connect("draw", expose_draw)
    window.connect("screen-changed", screen_changed)

    window.set_decorated(False)
    window.add_events(Gdk.EventMask.BUTTON_PRESS_MASK)
    window.connect("button-press-event", clicked)

    fixed_container = Gtk.Fixed()
    window.add(fixed_container)
    button = Gtk.Button.new_with_label("button1")
    button.set_size_request(100, 100)
    fixed_container.add(button)

    screen_changed(window, None, None)

    window.show_all()
    Gtk.main()

[ebassi (Emmanuele Bassi)]

@Mogh99

But I didn’t worked successfully with xfce.

Did you enable compositing on xfwm? You must use a compositor to have rounded corners.

[Mogh99 (Mohammed)]

Yep, it worked enabling the compositor did the trick.
I Enabled the compositor using Window Manager Tweaks.

Thank You!!

[Mogh99 (Mohammed)]

I am facing a new issue when adding the previous code. It removes the images background and make the buttons acts weird. as shown in the image.

So now I have rounded corners but I have missed up widgets

[Mogh99 (Mohammed)]

Nevermind, the code that I paste post#6 removed the widgets transparent.

The solution is only to use @ebassi and @Hamza_Algohary solutions and it will solve the rounded corner problem. solution