HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cssHooks + animate</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    #box {
      width: 120px; height: 80px; background: #ef4444; color: #fff;
      display: flex; align-items: center; justify-content: center;
      margin: 12px 0; cursor: pointer;
    }
    #out { color: #b91c1c; font-weight: bold; }
  </style>
</head>
<body>
  <div id="box">Click me</div>
  <div id="out">cssHooks also enable .animate({ borderRadius: ... }).</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    (function($) {
      $(function() {
        $.cssHooks.borderRadius = {
          get: function(elem) {
            return parseFloat($.css(elem, "borderRadius")) || 0;
          },
          set: function(elem, value) {
            elem.style.borderRadius = (typeof value === "number" ? value + "px" : value);
          }
        };
        $.fx.step.borderRadius = function(fx) {
          $.cssHooks.borderRadius.set(fx.elem, fx.now);
        };
        var round = false;
        $("#box").on("click", function() {
          round = !round;
          $(this).stop(true).animate(
            { borderRadius: round ? 40 : 0 },
            600
          );
          $("#out").text(round ? "Animating to 40px radius…" : "Animating back to square…");
        });
      });
    })(jQuery);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.cssHooks — animate with .animate() (Try It)