feat(editor): support border radius for shape dom renderer (#12326)

Comparison:

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lEGcysB4lFTEbCwZ8jMv/f2a266ba-c3d5-46ea-9aa5-38e5d0de6d5a.png)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
	- Border radius and border thickness of shapes now scale dynamically with zoom level for improved visual consistency.

- **Tests**
	- Added a test to ensure percentage-based border radius values are correctly rendered in the DOM.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/integration-test/src/__tests__/edgeless/shape-dom.spec.ts

@@ -1,6 +1,7 @@
 import { DomRenderer } from '@blocksuite/affine-block-surface';
 import { beforeEach, describe, expect, test } from 'vitest';
 
+import { wait } from '../utils/common.js';
 import { getSurface } from '../utils/edgeless.js';
 import { setupEditor } from '../utils/setup.js';
 
@@ -40,6 +41,27 @@ describe('Shape rendering with DOM renderer', () => {
     expect(shapeElement).toBeInstanceOf(HTMLElement);
   });
 
+  test('should correctly apply percentage-based border radius', async () => {
+    const surfaceView = getSurface(window.doc, window.editor);
+    const surfaceModel = surfaceView.model;
+    const shapeProps = {
+      type: 'shape',
+      subType: 'rectangle',
+      xywh: '[150, 150, 80, 60]', // width: 80, height: 60
+      radius: 0.1, // 10% of min(width, height) = 10% of 60 = 6
+      fill: '#ff0000',
+      stroke: '#000000',
+    };
+    const shapeId = surfaceModel.addElement(shapeProps);
+    await wait(100);
+    const shapeElement = surfaceView?.renderRoot.querySelector<HTMLElement>(
+      `[data-element-id="${shapeId}"]`
+    );
+
+    expect(shapeElement).not.toBeNull();
+    expect(shapeElement?.style.borderRadius).toBe('6px');
+  });
+
   test('should remove shape DOM node when element is deleted', async () => {
     const surfaceView = getSurface(window.doc, window.editor);
     const surfaceModel = surfaceView.model;