javascript - Highcharts Maps - Rounded zoom buttons

Question

I'm using Highcharts API for a project. Everything works fine but I have one problem. I want the zoom in/out buttons to be rounded. I've tried border-radius 50%, changing the r value on mapNavigation.buttonOptions.theme, but none of those worked out for me.

Any help will be greatly appreciated

Answer 1

use mapNavigation.buttonOptions.theme.r for adjusting the border radius

mapNavigation: {
   enabled: true,
   buttonOptions: {
       theme: {
          r: 8, // change border radius here
       },
       verticalAlign: 'bottom'
   }
},

Code and Demo: http://jsfiddle.net/j8213ymh/2/