Square "Bubble Buttons"

[DrNRG]

Hi,
Many thanks for 2.0Beta!
I have one question on removing the roundness through: border-radius: Xpx
Whatever I do, I cannot make it work.
Many thanks.

[koleos6]

You can put folowing code in custom styles

.bubble-button-card-container { border-radius: 10px !important; }

[JuliaSoriaSmith]

This no longer works for me.

This is what I have for a pop-up:

type: vertical-stack
cards:

• type: custom:bubble-card
  card_type: pop-up
  hash: '#main-media'
  button_type: switch
  entity: media_player.google_home_mini_2
  styles: |-

  .bubble-button-card,
  .bubble-range-slider,
  .bubble-button-background,
  .bubble-button-card-container {
  border-radius: 0px !important;
  }

The border of the popup is still round.
The bubble card should use ha-card-border-radius as a CSS variable to allow for themes to control the border radius.

[Mystically11]

considering a lot of popup optimization has happened, some of the popup styling code could have been changed.
try adding this:

.bubble-pop-up {
  border-radius: 0px !important;
}