border-radius not working in \style

[heinrich26]

Issue Summary

The shorthand CSS-property border-radius doesn't work in \style{...}{...}-macros from the tex/html-package. The longhand ones (e.g. border-top-left-radius) do work for some reason.

Steps to Reproduce

see this codepen: https://codepen.io/ddubyah/pen/nJXWoR

or try the following code:

\style{border-radius: 8px; border: 2pt solid blue;}{\bbox[10pt]{hello}}

% macro to set all radii at once:
\newcommand\borderRadius[2]{\style{border-top-left-radius: #1; border-top-right-radius: #1; border-bottom-left-radius: #1; border-bottom-right-radius: #1; border: 2pt solid blue;}{#2}}

% normal radii    
\borderRadius{8px}{\bbox[10pt]{hello}}
% equivalent to:
\style{border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border: 2pt solid blue;}{\bbox[10pt]{hello}}
% elliptical radii
\borderRadius{4px 10px}{\bbox[10pt]{hello}}

Technical details

• MathJax Version: v3 latest
• Client OS: Windows 11 24H2
• Browser: Chrome 136.0.7103.93

I am using the following MathJax configuration:

MathJax = {};

and loading MathJax via

<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js">
</script>

Additional Info

I tried tracing the removal of the border-radius-property in code, but cloudn't find anything

[dpvc]

Thanks for the report. This turns out to be a bug in MathJax's Styles object that handles parsing and re-creating style strings. I will make a PR to fix it in the upcoming v4.

In the meantime, you can incorporate

MathJax = {
  startup: {
    ready() {
      const {Styles} = MathJax._.util.Styles;
      Object.defineProperty(Styles.prototype, 'cssText', {
        get: function () {
          const styles = [];
          for (const name of Object.keys(this.styles)) {
            const parent = this.parentName(name);
            const cname = name.replace(/.*-/, '');
            if (!this.styles[parent] || !Styles.connect[parent]?.children?.includes(cname)) {
              styles.push(`${name}: ${this.styles[name]};`);
            }
          }
          return styles.join(' ');
        },
        enumerable: false,
        configurable: true,
      });
      MathJax.startup.defaultReady();
    }
  }
};

into your configuration in order to correct the problem.