Search code examples
cssbotframework

Is rounding border corners supported in Microsoft bot framework chat window supported

Does the Microsoft bot framework support styling border corners I've tried this

    const styleSet = window.WebChat.createStyleSet({
  botAvatarImage: '/assets/logo.png',
  bubbleBackground: '#9b9c94',
  bubbleBorderTopLeftRadius:'20px',
  bubbleFromUserBackground: '#38b349',
  backgroundColor: 'white',
});

But still nothing so I am wondering if it isn't supported by the Web chat window or am I typing it wrong. I want to round 3 corners of my chat box but not the fourth, I know borderRadius works but don't understand why this doesn't work.

Solution

  • bubbleBorderTopLeftRadius is not defined in the Webchat possible options. See open-source repository: https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js

    You can contribute to the repository to add this feature