How do I remove the black corner of the CTKbutton

Question

enter image description here

I don't know how to remove the black corner for the CTkbutton

#Create a button for Workout 

equipment_image = ImageTk.PhotoImage(Image.open("assets/dumbell.png").resize((100,100),Image.ANTIALIAS))

equipment_button=customtkinter.CTkButton(master=home,image=equipment_image,compound="top",text="Workout", fg_color="white", hover_color= "White" , hover= True,border_color="White" , border_width= 0 ,text_color="black")
equipment_button.place(relx=0.3, rely=0.5, anchor=tkinter.CENTER)

#Create a button for diet 
food_image=ImageTk.PhotoImage(Image.open("assets/food.png").resize((100,100),Image.ANTIALIAS))

food_button = customtkinter.CTkButton(master = home,image=food_image, text="Diet",fg_color="white", hover_color= "White" , hover= True, compound="top" , border_width= 0, border_color= "White",text_color="black")
food_button.place(relx=0.7, rely=0.5, anchor=tkinter.CENTER)

#Create a button for system

system_image=ImageTk.PhotoImage(Image.open("assets/system.png").resize((100,100),Image.ANTIALIAS))

system_button = customtkinter.CTkButton(master = home,image=system_image, text="Coming Soon",fg_color="white", hover_color= "White" , hover= True, compound="top" , border_width= 0, border_color= "White",text_color="black")
system_button.place(relx=0.3, rely=0.7, anchor=tkinter.CENTER)

#Create a button to find the closest gym 

closest_gym_image = ImageTk.PhotoImage(Image.open("assets/Closest gym.png").resize((100,100),Image.ANTIALIAS))

closest_gym_button = customtkinter.CTkButton(master = home,image=closest_gym_image, text="Coming Soon",fg_color="white", hover_color= "White" , hover= True, compound="top" , border_width= 0, border_color= "White", text_color="black")
closest_gym_button.place(relx=0.7, rely=0.7, anchor=tkinter.CENTER)

The image has some black corner around it

Answer 1

There are 3 ways i know how you can change the cornor colors

Changing the background color

You can change the background color of a button to the background color if the background color is just one simple color

self.non_transparent_button = customtkinter.CTkButton(self.frame, text='Non-transperant Button', bg_color='white')
self.non_transparent_button.place(x=200, y=300, anchor=CENTER)

Transparent background

The standard tkinter button dont support transparent backgrounds but the customtkinter library does. You can just change the background color to transparent like this

self.transparent_button = customtkinter.CTkButton(self.frame, text='Transperant Button', bg_color='transparent')
self.transparent_button.place(x=400, y=300, anchor=CENTER)

Custom background corners

With the customtkinter library you can also change the background cornor colors of each individual corner.

self.colored_corner_button = customtkinter.CTkButton(self.frame, text='Corner colored Button', background_corner_colors=['white', 'green', 'blue', 'red'])
self.colored_corner_button.place(x=600, y=300, anchor=CENTER)

Here is an program example how it could look like

from tkinter import *
import customtkinter

class Gui(customtkinter.CTk):
    def __init__(self):
        super().__init__()

        self.geometry('800x600')

        self.frame = Frame(self, background='black')
        self.frame.pack(expand=True, fill=BOTH)

        self.non_transparent_button = customtkinter.CTkButton(self.frame, text='Non-transperant Button', bg_color='white')
        self.non_transparent_button.place(x=200, y=300, anchor=CENTER)

        self.transparent_button = customtkinter.CTkButton(self.frame, text='Transperant Button', bg_color='transparent')
        self.transparent_button.place(x=400, y=300, anchor=CENTER)

        self.colored_corner_button = customtkinter.CTkButton(self.frame, text='Corner colored Button', background_corner_colors=['white', 'green', 'blue', 'red'])
        self.colored_corner_button.place(x=600, y=300, anchor=CENTER)



if __name__ == '__main__':
    gui = Gui()
    gui.mainloop()