Adding rounded corners

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.

Which version of GTK are you using?

Which platform and windowing system are you using?

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

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

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

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()

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

1 Like

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

Thank You!!

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 :upside_down_face:

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

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.