Round corners to context menu button

I have created context menu. Now i want that first menu button from upper side and last menu button from lower side should have rounded corners. Is it possible to do? What should I use?

Are you using the “ContextMenuButton” builder?

If so, you can see how that button is defined at extensions/Buttons.js. That will tell you how you can customize it. Or you can copy it and make whatever changes you like so you can define your own builder like “ContextMenuButton”.

I think for your question you just need to set "ButtonBorder.figure": "RoundedRectangle".

Its not working. My code is

MAKE(‘ContextMenuButton’ ,
{
name: ‘show’,
height: 30,
‘ButtonBorder.fill’: null,
‘ButtonBorder.figure’: ‘RoundedRectangle’,
‘ButtonBorder.stroke’: null,
‘_buttonFillOver’: null,
‘_buttonStrokeOver’: null,
background: ‘white’,
shadowVisible: true,

                mouseEnter: function (e, obj) {
                  obj.background = 'grey';
                },
                mouseLeave: function (e, obj) {
                  obj.background = 'white';
                }

}

)

When i run this code, border is rounded but button is looking like rectangle

Can you please show what you want?

Captureq

This is i want exactly. Rounded from all sides

Have the top button use the “RoundedTopRectangle” figure, and the bottom button use the “RoundedBottomRectangle” figure, shown at https://gojs.net/latest/intro/shapes.html#CustomFigures and available at https://gojs.net/latest/extensions/RoundedRectangles.js.

And set the background of the “ContextMenu” to null.