diff --git a/locales/en-US.yml b/locales/en-US.yml
index e8e3497f87..3bb8739f19 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -507,6 +507,7 @@ createAccount: "Create account"
 existingAccount: "Existing account"
 regenerate: "Regenerate"
 fontSize: "Font size"
+cornerRadius: "Corner roundness"
 mediaListWithOneImageAppearance: "Height of media lists with one image only"
 limitTo: "Limit to {x}"
 noFollowRequests: "You don't have any pending follow requests"
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 1c1105cb84..b2dec3e58b 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -510,6 +510,7 @@ export interface Locale {
     "existingAccount": string;
     "regenerate": string;
     "fontSize": string;
+    "cornerRadius": string;
     "mediaListWithOneImageAppearance": string;
     "limitTo": string;
     "noFollowRequests": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 68a6ca2daf..c49de02b1a 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -507,6 +507,7 @@ createAccount: "アカウントを作成"
 existingAccount: "既存のアカウント"
 regenerate: "再生成"
 fontSize: "フォントサイズ"
+cornerRadius: "コーナーの丸み"
 mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
 limitTo: "{x}を上限に"
 noFollowRequests: "フォロー申請はありません"
diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index 570b15da03..cb0c3d310d 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -132,6 +132,11 @@
 		document.documentElement.classList.add('f-' + fontSize);
 	}
 
+	const cornerRadius = localStorage.getItem('cornerRadius');
+	if (cornerRadius) {
+		document.documentElement.classList.add(`radius-${cornerRadius}`);
+	}
+
 	const useSystemFont = localStorage.getItem('useSystemFont');
 	if (useSystemFont) {
 		document.documentElement.classList.add('useSystemFont');
@@ -228,7 +233,7 @@
 		}
 
 		button {
-			border-radius: 4px;
+			border-radius: 999px;
 			padding: 0px 12px 0px 12px;
 			border: none;
 			cursor: pointer;
@@ -296,7 +301,7 @@
 			margin-bottom: 2rem;
 			padding: 0.5rem 1rem;
 			width: 40rem;
-			border-radius: 5px;
+			border-radius: 10px;
 			justify-content: center;
 			margin: auto;
 		}
diff --git a/packages/backend/src/server/web/error.css b/packages/backend/src/server/web/error.css
index 8bad3d843e..ea3056bdaf 100644
--- a/packages/backend/src/server/web/error.css
+++ b/packages/backend/src/server/web/error.css
@@ -24,7 +24,7 @@ html {
 }
 
 button {
-    border-radius: 4px;
+    border-radius: 999px;
     padding: 0px 12px 0px 12px;
     border: none;
     cursor: pointer;
@@ -93,7 +93,7 @@ code {
     background: #333;
     padding: 0.5rem 1rem;
     max-width: 40rem;
-    border-radius: 5px;
+    border-radius: 10px;
     justify-content: center;
     margin: auto;
     white-space: pre-wrap;
diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue
index 1ef8a205e2..14247f4bf5 100644
--- a/packages/frontend/src/components/MkAbuseReport.vue
+++ b/packages/frontend/src/components/MkAbuseReport.vue
@@ -84,7 +84,7 @@ function resolve() {
 			box-sizing: border-box;
 			align-items: center;
 			padding: 14px;
-			border-radius: 5px;
+			border-radius: var(--radius-sm);
 			--c: rgb(255 196 0 / 15%);
 			background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
 			background-size: 16px 16px;
diff --git a/packages/frontend/src/components/MkAchievements.vue b/packages/frontend/src/components/MkAchievements.vue
index bea0ed26d8..aac7f508a1 100644
--- a/packages/frontend/src/components/MkAchievements.vue
+++ b/packages/frontend/src/components/MkAchievements.vue
@@ -123,7 +123,7 @@ onMounted(() => {
 	width: 58px;
 	height: 58px;
 	padding: 6px;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	box-sizing: border-box;
 	pointer-events: none;
 	user-select: none;
@@ -190,7 +190,7 @@ onMounted(() => {
 	position: relative;
 	width: 100%;
 	height: 100%;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	box-shadow: 0 1px 0px #ffffff88 inset;
 }
 
diff --git a/packages/frontend/src/components/MkAsUi.vue b/packages/frontend/src/components/MkAsUi.vue
index 3eb020c50e..9596ce6077 100644
--- a/packages/frontend/src/components/MkAsUi.vue
+++ b/packages/frontend/src/components/MkAsUi.vue
@@ -125,6 +125,6 @@ function openPostForm() {
 
 .postForm {
 	background: var(--bg);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 </style>
diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
index 7c4f910559..b047405fac 100644
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@@ -433,7 +433,7 @@ onBeforeUnmount(() => {
 	max-width: 28px;
 	max-height: 28px;
 	margin: 0 8px 0 0;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 }
 
 .userName {
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index 3801d6b5d4..2fdc2bbe07 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -126,7 +126,7 @@ function onMousedown(evt: MouseEvent): void {
 	box-shadow: none;
 	text-decoration: none;
 	background: var(--buttonBg);
-	border-radius: 5px;
+	border-radius: var(--radius-xs);
 	overflow: clip;
 	box-sizing: border-box;
 	transition: background 0.1s ease;
@@ -154,7 +154,7 @@ function onMousedown(evt: MouseEvent): void {
 	}
 
 	&.rounded {
-		border-radius: 4px;
+		border-radius: var(--radius-ellipse);
 	}
 
 	&.primary {
@@ -264,7 +264,7 @@ function onMousedown(evt: MouseEvent): void {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	overflow: clip;
 	pointer-events: none;
 }
@@ -273,7 +273,7 @@ function onMousedown(evt: MouseEvent): void {
 	position: absolute;
 	width: 2px;
 	height: 2px;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	background: rgba(0, 0, 0, 0.1);
 	opacity: 1;
 	transform: scale(1);
diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue
index 00a1d41321..4a58204b5b 100644
--- a/packages/frontend/src/components/MkChannelFollowButton.vue
+++ b/packages/frontend/src/components/MkChannelFollowButton.vue
@@ -73,7 +73,7 @@ async function onClick() {
 	padding: 0;
 	height: 31px;
 	font-size: 16px;
-	border-radius: 5px;
+	border-radius: var(--radius-xl);
 	background: #fff;
 
 	&.full {
@@ -95,7 +95,7 @@ async function onClick() {
 			bottom: -5px;
 			left: -5px;
 			border: 2px solid var(--focus);
-			border-radius: 5px;
+			border-radius: var(--radius-xl);
 		}
 	}
 
diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
index 6429258f4a..9c6e2f00bd 100644
--- a/packages/frontend/src/components/MkChannelPreview.vue
+++ b/packages/frontend/src/components/MkChannelPreview.vue
@@ -100,7 +100,7 @@ const bannerStyle = computed(() => {
 			padding: 8px 12px;
 			font-size: 80%;
 			background: rgba(0, 0, 0, 0.7);
-			border-radius: 5px;
+			border-radius: var(--radius-sm);
 			color: #fff;
 		}
 
@@ -111,7 +111,7 @@ const bannerStyle = computed(() => {
 			left: 16px;
 			background: rgba(0, 0, 0, 0.7);
 			color: var(--warn);
-			border-radius: 5px;
+			border-radius: var(--radius-sm);
 			font-weight: bold;
 			font-size: 1em;
 			padding: 4px 7px;
diff --git a/packages/frontend/src/components/MkChartLegend.vue b/packages/frontend/src/components/MkChartLegend.vue
index 2e83d59b59..546bc0b4b1 100644
--- a/packages/frontend/src/components/MkChartLegend.vue
+++ b/packages/frontend/src/components/MkChartLegend.vue
@@ -55,7 +55,7 @@ defineExpose({
 			font-size: 85%;
 			padding: 4px 12px 4px 8px;
 			border: solid 1px var(--divider);
-			border-radius: 4px;
+			border-radius: var(--radius-ellipse);
 
 			&:hover {
 				border-color: var(--inputBorderHover);
@@ -70,7 +70,7 @@ defineExpose({
 				display: inline-block;
 				width: 12px;
 				height: 12px;
-				border-radius: 100%;
+				border-radius: var(--radius-full);
 				vertical-align: -10%;
 			}
 		}
diff --git a/packages/frontend/src/components/MkCode.core.vue b/packages/frontend/src/components/MkCode.core.vue
index 4ec3540419..21684b462a 100644
--- a/packages/frontend/src/components/MkCode.core.vue
+++ b/packages/frontend/src/components/MkCode.core.vue
@@ -77,7 +77,7 @@ watch(() => props.lang, (to) => {
 	& :deep(.shiki) {
 		padding: 12px;
 		margin: 0;
-		border-radius: 6px;
+		border-radius: var(--radius-sm);
 		min-height: 130px;
 		pointer-events: none;
 		min-width: calc(100% - 24px);
diff --git a/packages/frontend/src/components/MkCodeEditor.vue b/packages/frontend/src/components/MkCodeEditor.vue
index 2d56a61963..5434042684 100644
--- a/packages/frontend/src/components/MkCodeEditor.vue
+++ b/packages/frontend/src/components/MkCodeEditor.vue
@@ -129,7 +129,7 @@ watch(v, () => {
 
 .focused.codeEditorRoot {
 	border-color: var(--accent) !important;
-	border-radius: 6px;
+	border-radius: var(--radius-sm);
 }
 
 .codeEditorScroller {
diff --git a/packages/frontend/src/components/MkColorInput.vue b/packages/frontend/src/components/MkColorInput.vue
index 4ebfec5b51..79b1949640 100644
--- a/packages/frontend/src/components/MkColorInput.vue
+++ b/packages/frontend/src/components/MkColorInput.vue
@@ -102,7 +102,7 @@ const onInput = (ev: KeyboardEvent) => {
 	color: var(--fg);
 	background: var(--panel);
 	border: solid 1px var(--panel);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	outline: none;
 	box-shadow: none;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 3195377d60..42c6cc1075 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -223,7 +223,7 @@ onUnmounted(() => {
 				background: var(--panel);
 				padding: 6px 10px;
 				font-size: 0.8em;
-				border-radius: 4px;
+				border-radius: var(--radius-ellipse);
 				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 			}
 
diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue
index b62f4324eb..e0692eb383 100644
--- a/packages/frontend/src/components/MkDialog.vue
+++ b/packages/frontend/src/components/MkDialog.vue
@@ -197,7 +197,7 @@ onBeforeUnmount(() => {
 	box-sizing: border-box;
 	text-align: center;
 	background: var(--panel);
-	border-radius: 4px;
+	border-radius: var(--radius-md);
 }
 
 .icon {
diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index c8f23286fd..2c08ac754e 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -107,7 +107,7 @@ function onDragend() {
 	position: relative;
 	padding: 8px 0 0 0;
 	min-height: 180px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	cursor: pointer;
 
 	&:hover {
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index f352e655ba..9f79a44d4c 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -289,7 +289,7 @@ function onContextmenu(ev: MouseEvent) {
 	padding: 8px;
 	height: 64px;
 	background: var(--driveFolderBg);
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 	cursor: pointer;
 
 	&.draghover {
@@ -302,7 +302,7 @@ function onContextmenu(ev: MouseEvent) {
 			bottom: -4px;
 			left: -4px;
 			border: 2px dashed var(--focus);
-			border-radius: 4px;
+			border-radius: var(--radius-xs);
 		}
 	}
 }
diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue
index 66807cf42c..3063523791 100644
--- a/packages/frontend/src/components/MkDriveFileThumbnail.vue
+++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue
@@ -63,7 +63,7 @@ const isThumbnailAvailable = computed(() => {
 	position: relative;
 	display: flex;
 	background: var(--panel);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 2af7a76a37..50ed8048bb 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -594,7 +594,7 @@ defineExpose({
 					width: var(--eachSize);
 					height: var(--eachSize);
 					contain: strict;
-					border-radius: 4px;
+					border-radius: var(--radius-xs);
 					font-size: 24px;
 
 					&:focus-visible {
diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index 9d3132c540..581d815d66 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -74,7 +74,7 @@ function opening() {
 
 <style lang="scss" module>
 .drawer {
-	border-radius: 24px;
+	border-radius: var(--radius-lg);
 	border-bottom-right-radius: 0;
 	border-bottom-left-radius: 0;
 }
diff --git a/packages/frontend/src/components/MkFileListForAdmin.vue b/packages/frontend/src/components/MkFileListForAdmin.vue
index 3edd30bc37..eb0d4d61ac 100644
--- a/packages/frontend/src/components/MkFileListForAdmin.vue
+++ b/packages/frontend/src/components/MkFileListForAdmin.vue
@@ -108,7 +108,7 @@ const props = defineProps<{
 				padding: 2px 4px;
 				background: #ff0000bf;
 				color: #fff;
-				border-radius: 4px;
+				border-radius: var(--radius-xs);
 				font-size: 85%;
 				animation: sensitive-blink 1s infinite;
 			}
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index 007c4b329d..30e93ef9e4 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -139,7 +139,7 @@ onMounted(() => {
 	background: var(--buttonBg);
 	-webkit-backdrop-filter: var(--blur, blur(15px));
 	backdrop-filter: var(--blur, blur(15px));
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	transition: border-radius 0.3s;
 
 	&:hover {
@@ -153,7 +153,7 @@ onMounted(() => {
 	}
 
 	&.opened {
-		border-radius: 6px 6px 0 0;
+		border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 	}
 }
 
@@ -207,7 +207,7 @@ onMounted(() => {
 
 .body {
 	background: var(--panel);
-	border-radius: 0 0 6px 6px;
+	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
 	container-type: inline-size;
 
 	&.bgSame {
diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
index 17714558fe..eebb753db1 100644
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -151,7 +151,7 @@ onBeforeUnmount(() => {
 	padding: 0;
 	height: 31px;
 	font-size: 16px;
-	border-radius: 5px;
+	border-radius: var(--radius-xl);
 	background: #fff;
 
 	&.full {
@@ -179,7 +179,7 @@ onBeforeUnmount(() => {
 			bottom: -5px;
 			left: -5px;
 			border: 2px solid var(--focus);
-			border-radius: 5px;
+			border-radius: var(--radius-xl);
 		}
 	}
 
diff --git a/packages/frontend/src/components/MkGoogle.vue b/packages/frontend/src/components/MkGoogle.vue
index b245b1b7f4..185a49b5a9 100644
--- a/packages/frontend/src/components/MkGoogle.vue
+++ b/packages/frontend/src/components/MkGoogle.vue
@@ -40,7 +40,7 @@ const search = () => {
 	height: 40px;
 	font-size: 16px;
 	border: solid 1px var(--divider);
-	border-radius: 4px 0 0 4px;
+	border-radius: var(--radius-xs) 0 0 var(--radius-xs);
 	-webkit-appearance: textfield;
 }
 
@@ -50,7 +50,7 @@ const search = () => {
 	padding: 0 16px;
 	border: solid 1px var(--divider);
 	border-left: none;
-	border-radius: 0 4px 4px 0;
+	border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
 
 	&:active {
 		box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
diff --git a/packages/frontend/src/components/MkInput.vue b/packages/frontend/src/components/MkInput.vue
index 6979250c65..6f237761a8 100644
--- a/packages/frontend/src/components/MkInput.vue
+++ b/packages/frontend/src/components/MkInput.vue
@@ -227,7 +227,7 @@ defineExpose({
 	color: var(--fg);
 	background: var(--panel);
 	border: solid 1px var(--panel);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	outline: none;
 	box-shadow: none;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/components/MkInstanceCardMini.vue b/packages/frontend/src/components/MkInstanceCardMini.vue
index 4fb36d73c1..6af9c6ccb5 100644
--- a/packages/frontend/src/components/MkInstanceCardMini.vue
+++ b/packages/frontend/src/components/MkInstanceCardMini.vue
@@ -46,14 +46,14 @@ function getInstanceIcon(instance): string {
 	align-items: center;
 	padding: 16px;
 	background: var(--panel);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 
 	> :global(.icon) {
 		display: block;
 		width: ($bodyTitleHieght + $bodyInfoHieght);
 		height: ($bodyTitleHieght + $bodyInfoHieght);
 		object-fit: cover;
-		border-radius: 4px;
+		border-radius: var(--radius-xs);
 		margin-right: 10px;
 	}
 
diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue
index 1a4f2bfbb9..f0650e48f1 100644
--- a/packages/frontend/src/components/MkInstanceTicker.vue
+++ b/packages/frontend/src/components/MkInstanceTicker.vue
@@ -46,7 +46,7 @@ $height: 2ex;
 	display: flex;
 	align-items: center;
 	height: $height;
-	border-radius: 4px 0 0 4px;
+	border-radius: var(--radius-xs) 0 0 var(--radius-xs);
 	overflow: clip;
 	color: #fff;
 	text-shadow: /* .866 ≈ sin(60deg) */
diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue
index 0f951ec0b9..17f8af4f63 100644
--- a/packages/frontend/src/components/MkLaunchPad.vue
+++ b/packages/frontend/src/components/MkLaunchPad.vue
@@ -77,12 +77,12 @@ function close() {
 	overflow: auto;
 	overscroll-behavior: contain;
 	text-align: left;
-	border-radius: 4px;
+	border-radius: var(--radius-md);
 
 	&.asDrawer {
 		width: 100%;
 		padding: 16px 16px max(env(safe-area-inset-bottom, 0px), 16px) 16px;
-		border-radius: 24px;
+		border-radius: var(--radius-lg);
 		border-bottom-right-radius: 0;
 		border-bottom-left-radius: 0;
 		text-align: center;
@@ -100,7 +100,7 @@ function close() {
 			justify-content: center;
 			vertical-align: bottom;
 			height: 100px;
-			border-radius: 5px;
+			border-radius: var(--radius);
 
 			&:hover {
 				color: var(--accent);
diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue
index 672a68ed1f..254981c254 100644
--- a/packages/frontend/src/components/MkMediaBanner.vue
+++ b/packages/frontend/src/components/MkMediaBanner.vue
@@ -55,7 +55,7 @@ watch(audioEl, () => {
 <style lang="scss" module>
 .root {
 	width: 100%;
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 	margin-top: 4px;
 	overflow: clip;
 }
@@ -79,7 +79,7 @@ watch(audioEl, () => {
 }
 
 .audio {
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	overflow: clip;
 }
 </style>
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 016a4b020f..1fa42c1e48 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -127,7 +127,7 @@ function showMenu(ev: MouseEvent) {
 
 .sensitive {
 	position: relative;
-	
+
 	&::after {
 		content: "";
 		position: absolute;
@@ -157,7 +157,7 @@ function showMenu(ev: MouseEvent) {
 .hide {
 	display: block;
 	position: absolute;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	background-color: black;
 	color: var(--accentLighten);
 	font-size: 12px;
@@ -187,7 +187,7 @@ function showMenu(ev: MouseEvent) {
 .menu {
 	display: block;
 	position: absolute;
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 	background-color: rgba(0, 0, 0, 0.3);
 	-webkit-backdrop-filter: var(--blur, blur(15px));
 	backdrop-filter: var(--blur, blur(15px));
@@ -223,7 +223,7 @@ function showMenu(ev: MouseEvent) {
 .indicator {
 	/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
 	background-color: black;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	color: var(--accentLighten);
 	display: inline-block;
 	font-weight: bold;
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index c9f02dd452..5e534db948 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -341,7 +341,7 @@ const previewable = (file: Misskey.entities.DriveFile): boolean => {
 
 .media {
 	overflow: hidden; // clipにするとバグる
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 
 :global(.pswp) {
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index e1f7b735f0..33a9b0fbf9 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -77,7 +77,7 @@ watch(videoEl, () => {
 .hide {
 	display: block;
 	position: absolute;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	background-color: black;
 	color: var(--accentLighten);
 	font-size: 14px;
@@ -127,7 +127,7 @@ watch(videoEl, () => {
 .indicator {
 	/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
 	background-color: black;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	color: var(--accentLighten);
 	display: inline-block;
 	font-weight: bold;
diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue
index 2e8f9e26d3..4d42053657 100644
--- a/packages/frontend/src/components/MkMention.vue
+++ b/packages/frontend/src/components/MkMention.vue
@@ -49,7 +49,7 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
 .root {
 	display: inline-block;
 	padding: 4px 8px 4px 4px;
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 	color: var(--mention);
 
 	&.isMe {
@@ -63,7 +63,7 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
 	object-fit: cover;
 	margin: 0 0.2em 0 0;
 	vertical-align: bottom;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 }
 
 .host {
diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 1588f924c4..83f56dc1a2 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -241,7 +241,7 @@ onBeforeUnmount(() => {
 	&.asDrawer {
 		padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
 		width: 100%;
-		border-radius: 24px;
+		border-radius: var(--radius-lg);
 		border-bottom-right-radius: 0;
 		border-bottom-left-radius: 0;
 
@@ -251,7 +251,7 @@ onBeforeUnmount(() => {
 
 			&:before {
 				width: calc(100% - 24px);
-				border-radius: 12px;
+				border-radius: var(--radius);
 			}
 
 			> .icon {
@@ -290,7 +290,7 @@ onBeforeUnmount(() => {
 		margin: auto;
 		width: calc(100% - 16px);
 		height: 100%;
-		border-radius: 5px;
+		border-radius: var(--radius-sm);
 	}
 
 	&:not(:disabled):hover {
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index cba561b812..2f9ed5ce2c 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -699,7 +699,7 @@ function readPromo() {
 			padding: 0 4px;
 			margin-bottom: 0 !important;
 			background: var(--popup);
-			border-radius: 5px;
+			border-radius: var(--radius-sm);
 			box-shadow: 0px 4px 32px var(--shadow);
 		}
 
@@ -831,7 +831,7 @@ function readPromo() {
 	left: 8px;
 	width: 5px;
 	height: calc(100% - 16px);
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 	pointer-events: none;
 }
 
@@ -871,7 +871,7 @@ function readPromo() {
 	background: var(--popup);
 	padding: 6px 10px;
 	font-size: 0.8em;
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 	box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 }
 
@@ -901,7 +901,7 @@ function readPromo() {
 	background: var(--panel);
 	padding: 6px 10px;
 	font-size: 0.8em;
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 	box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 }
 
@@ -937,7 +937,7 @@ function readPromo() {
 .quoteNote {
 	padding: 16px;
 	border: dashed 1px var(--renote);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 376d4fd55d..d1989ad3e7 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -739,7 +739,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
 	width: 28px;
 	height: 28px;
 	margin: 0 8px 0 0;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 
 .renoteText {
@@ -813,7 +813,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
 	font-size: 80%;
 	line-height: 1;
 	border: solid 0.5px var(--divider);
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 }
 
 .noteHeaderInfo {
@@ -869,7 +869,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
 .quoteNote {
 	padding: 16px;
 	border: dashed 1px var(--renote);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	overflow: clip;
 }
 
@@ -947,7 +947,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
 .reactionTab {
 	padding: 4px 6px;
 	border: solid 1px var(--divider);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 
 .reactionTabActive {
diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
index ed15b43d0a..f258b2a1b6 100644
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -81,7 +81,7 @@ async function menuVersions(viaKeyboard = false): Promise<void> {
 	padding: 1px 6px;
 	font-size: 80%;
 	border: solid 0.5px var(--divider);
-	border-radius: 3px;
+	border-radius: var(--radius-xs);
 }
 
 .username {
diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue
index 79ce60baff..81ea36c2a5 100644
--- a/packages/frontend/src/components/MkNotePreview.vue
+++ b/packages/frontend/src/components/MkNotePreview.vue
@@ -44,7 +44,7 @@ const props = defineProps<{
 	margin: 0 10px 0 0 !important;
 	width: 40px !important;
 	height: 40px !important;
-	border-radius: 8px !important;
+	border-radius: var(--radius-sm) !important;
 	pointer-events: none !important;
 }
 
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index b22e9e016a..b0e91e523e 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -56,7 +56,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
 	margin: 0 10px 0 0;
 	width: 34px;
 	height: 34px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	position: sticky !important;
 	top: calc(16px + var(--stickyTop, 0px));
 	left: 0;
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index 3c8ba00121..fa113ae2f8 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -418,7 +418,7 @@ if (props.detail) {
 	left: 8px;
 	width: 5px;
 	height: calc(100% - 8px);
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 	pointer-events: none;
 }
 
@@ -428,7 +428,7 @@ if (props.detail) {
 	margin: 0 8px 0 0;
 	width: 38px;
 	height: 38px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 
 .body {
@@ -514,6 +514,6 @@ if (props.detail) {
 	padding: 8px !important;
 	border: 1px solid var(--divider);
 	margin: 8px 8px 0 8px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 </style>
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index 379dfe806d..5d86eee71c 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -181,7 +181,7 @@ useTooltip(reactionRef, (showing) => {
 	display: block;
 	width: 100%;
 	height: 100%;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 
 .subIcon {
@@ -192,7 +192,7 @@ useTooltip(reactionRef, (showing) => {
 	width: 20px;
 	height: 20px;
 	box-sizing: border-box;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	background: var(--panel);
 	box-shadow: 0 0 0 3px var(--panel);
 	font-size: 11px;
diff --git a/packages/frontend/src/components/MkOmit.vue b/packages/frontend/src/components/MkOmit.vue
index d353e4d8e6..ac957d93dc 100644
--- a/packages/frontend/src/components/MkOmit.vue
+++ b/packages/frontend/src/components/MkOmit.vue
@@ -69,7 +69,7 @@ onUnmounted(() => {
 				background: var(--panel);
 				padding: 6px 10px;
 				font-size: 0.8em;
-				border-radius: 4px;
+				border-radius: var(--radius-ellipse);
 				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 			}
 
diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue
index efa8170027..2becabb41e 100644
--- a/packages/frontend/src/components/MkPoll.vue
+++ b/packages/frontend/src/components/MkPoll.vue
@@ -116,7 +116,7 @@ async function refresh() {
 	padding: 4px;
 	//border: solid 0.5px var(--divider);
 	background: var(--accentedBg);
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 	overflow: clip;
 	cursor: pointer;
 }
@@ -136,7 +136,7 @@ async function refresh() {
 	display: inline-block;
 	padding: 3px 5px;
 	background: var(--panel);
-	border-radius: 3px;
+	border-radius: var(--radius-xs);
 }
 
 .info {
diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index ee7dbecf05..146b9d7ccf 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -73,7 +73,7 @@ function close() {
 
 <style lang="scss" module>
 .drawer {
-	border-radius: 24px;
+	border-radius: var(--radius-lg);
 	border-bottom-right-radius: 0;
 	border-bottom-left-radius: 0;
 }
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index e3fa05d374..04674fa258 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkAcct :user="u"/>
 				<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ph-x ph-bold ph-lg"></i></button>
 			</span>
-			<button class="_buttonPrimary" style="padding: 4px; border-radius: 5px;" @click="addVisibleUser"><i class="ph-plus ph-bold ph-lg ti-fw"></i></button>
+			<button class="_buttonPrimary" style="padding: 4px; border-radius: var(--radius-sm);" @click="addVisibleUser"><i class="ph-plus ph-bold ph-lg ti-fw"></i></button>
 		</div>
 	</div>
 	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
@@ -998,7 +998,7 @@ defineExpose({
 	padding: 0 12px;
 	line-height: 34px;
 	font-weight: bold;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	min-width: 90px;
 	box-sizing: border-box;
 	color: var(--fgOnAccent);
@@ -1008,7 +1008,7 @@ defineExpose({
 .headerRightItem {
 	margin: 0;
 	padding: 8px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 
 	&:hover {
 		background: var(--X5);
@@ -1071,7 +1071,7 @@ defineExpose({
 .visibleUser {
 	margin-right: 14px;
 	padding: 8px 0 8px 8px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	background: var(--X4);
 }
 
@@ -1140,7 +1140,7 @@ defineExpose({
 	padding: 4px 6px;
 	font-size: .9em;
 	color: var(--warn);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	min-width: 1.6em;
 	text-align: center;
 
@@ -1180,7 +1180,7 @@ defineExpose({
 	font-size: 1em;
 	width: auto;
 	height: 100%;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 
 	&:hover {
 		background: var(--X5);
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index bc622d9350..a84ac121ef 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -143,7 +143,7 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent): void {
 	width: 64px;
 	height: 64px;
 	margin-right: 4px;
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 	overflow: hidden;
 	cursor: move;
 }
diff --git a/packages/frontend/src/components/MkRadio.vue b/packages/frontend/src/components/MkRadio.vue
index e0eca18ed2..f22774ef97 100644
--- a/packages/frontend/src/components/MkRadio.vue
+++ b/packages/frontend/src/components/MkRadio.vue
@@ -55,7 +55,7 @@ function toggle(): void {
 	background-color: var(--panel);
 	background-clip: padding-box !important;
 	border: solid 1px var(--panel);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	font-size: 90%;
 	transition: all 0.2s;
 	user-select: none;
@@ -101,7 +101,7 @@ function toggle(): void {
 	height: 14px;
 	background: none;
 	border: solid 2px var(--inputBorder);
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	transition: inherit;
 
 	&:after {
@@ -112,7 +112,7 @@ function toggle(): void {
 		right: 3px;
 		bottom: 3px;
 		left: 3px;
-		border-radius: 100%;
+		border-radius: var(--radius-full);
 		opacity: 0;
 		transform: scale(0);
 		transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
diff --git a/packages/frontend/src/components/MkRange.vue b/packages/frontend/src/components/MkRange.vue
index 922c3a3a0e..c1f5b6a790 100644
--- a/packages/frontend/src/components/MkRange.vue
+++ b/packages/frontend/src/components/MkRange.vue
@@ -186,7 +186,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 		padding: 7px 12px;
 		background: var(--panel);
 		border: solid 1px var(--panel);
-		border-radius: 5px;
+		border-radius: var(--radius-sm);
 
 		> .container {
 			position: relative;
@@ -202,7 +202,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 				width: calc(100% - #{$thumbWidth});
 				height: 3px;
 				background: rgba(0, 0, 0, 0.1);
-				border-radius: 4px;
+				border-radius: var(--radius-ellipse);
 				overflow: clip;
 
 				> .highlight {
@@ -233,7 +233,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 					height: 3px;
 					margin-left: - math.div($tickWidth, 2);
 					background: var(--divider);
-					border-radius: 4px;
+					border-radius: var(--radius-ellipse);
 				}
 			}
 
@@ -243,7 +243,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 				height: $thumbHeight;
 				cursor: grab;
 				background: var(--accent);
-				border-radius: 4px;
+				border-radius: var(--radius-ellipse);
 
 				&:hover {
 					background: var(--accentLighten);
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index 03c91e2ba6..dfe2a142f5 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -119,7 +119,7 @@ useTooltip(buttonEl, async (showing) => {
 	margin: 2px;
 	padding: 0 6px;
 	font-size: 1.5em;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 
 	&.canToggle {
 		background: var(--buttonBg);
@@ -136,7 +136,7 @@ useTooltip(buttonEl, async (showing) => {
 	&.small {
 		height: 32px;
 		font-size: 1em;
-		border-radius: 4px;
+		border-radius: var(--radius-xs);
 
 		> .count {
 			font-size: 0.9em;
@@ -147,7 +147,7 @@ useTooltip(buttonEl, async (showing) => {
 	&.large {
 		height: 52px;
 		font-size: 2em;
-		border-radius: 5px;
+		border-radius: var(--radius-sm);
 
 		> .count {
 			font-size: 0.6em;
diff --git a/packages/frontend/src/components/MkSelect.vue b/packages/frontend/src/components/MkSelect.vue
index 83563587e2..26e4a0c2da 100644
--- a/packages/frontend/src/components/MkSelect.vue
+++ b/packages/frontend/src/components/MkSelect.vue
@@ -241,7 +241,7 @@ function show(ev: MouseEvent) {
 	color: var(--fg);
 	background: var(--panel);
 	border: solid 1px var(--panel);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	outline: none;
 	box-shadow: none;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index fcccc1b0f3..cc5fc29ed3 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -236,6 +236,6 @@ function resetPassword(): void {
 	background: #ddd;
 	background-position: center;
 	background-size: cover;
-	border-radius: 5px;
+	border-radius: var(--radius-full);
 }
 </style>
diff --git a/packages/frontend/src/components/MkSignupDialog.rules.vue b/packages/frontend/src/components/MkSignupDialog.rules.vue
index 96072a19c6..3dc95ad0a0 100644
--- a/packages/frontend/src/components/MkSignupDialog.rules.vue
+++ b/packages/frontend/src/components/MkSignupDialog.rules.vue
@@ -182,7 +182,7 @@ async function updateAgreeNote(v: boolean) {
 		font-weight: bold;
 		align-items: center;
 		justify-content: center;
-		border-radius: 4px;
+		border-radius: var(--radius-ellipse);
 	}
 }
 
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 8f6dc6aee3..c8c48d1623 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -88,7 +88,7 @@ const collapsed = $ref(isLong);
 				background: var(--panel);
 				padding: 6px 10px;
 				font-size: 0.8em;
-				border-radius: 4px;
+				border-radius: var(--radius-ellipse);
 				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 			}
 
@@ -131,7 +131,7 @@ const collapsed = $ref(isLong);
 	background: var(--popup);
 	padding: 6px 10px;
 	font-size: 0.8em;
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 	box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 }
 </style>
diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue
index 50bfd64fc8..93296dd9d5 100644
--- a/packages/frontend/src/components/MkSuperMenu.vue
+++ b/packages/frontend/src/components/MkSuperMenu.vue
@@ -59,7 +59,7 @@ defineProps<{
 				width: 100%;
 				box-sizing: border-box;
 				padding: 9px 16px 9px 8px;
-				border-radius: 5px;
+				border-radius: var(--radius-sm);
 				font-size: 0.9em;
 
 				&:hover {
@@ -141,7 +141,7 @@ defineProps<{
 						height: 60px;
 						aspect-ratio: 1;
 						background: var(--panel);
-						border-radius: 5px;
+						border-radius: var(--radius-full);
 					}
 
 					> .text {
diff --git a/packages/frontend/src/components/MkSwitch.button.vue b/packages/frontend/src/components/MkSwitch.button.vue
index 9d20103364..b82f36cdd3 100644
--- a/packages/frontend/src/components/MkSwitch.button.vue
+++ b/packages/frontend/src/components/MkSwitch.button.vue
@@ -52,7 +52,7 @@ const toggle = () => {
 	background: var(--switchOffBg);
 	background-clip: content-box;
 	border: solid 1px var(--switchOffBg);
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 	cursor: pointer;
 	transition: inherit;
 	user-select: none;
@@ -72,7 +72,7 @@ const toggle = () => {
 	top: 3px;
 	width: 15px;
 	height: 15px;
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 	transition: all 0.2s ease;
 
 	&:not(.knobChecked) {
diff --git a/packages/frontend/src/components/MkTab.vue b/packages/frontend/src/components/MkTab.vue
index 2b93d2eb4f..2b56b946d2 100644
--- a/packages/frontend/src/components/MkTab.vue
+++ b/packages/frontend/src/components/MkTab.vue
@@ -39,7 +39,7 @@ export default defineComponent({
 	> button {
 		flex: 1;
 		padding: 10px 8px;
-		border-radius: 4px;
+		border-radius: var(--radius-ellipse);
 
 		&:disabled {
 			opacity: 1 !important;
diff --git a/packages/frontend/src/components/MkTextarea.vue b/packages/frontend/src/components/MkTextarea.vue
index 036ad3b9e7..3ace738f1b 100644
--- a/packages/frontend/src/components/MkTextarea.vue
+++ b/packages/frontend/src/components/MkTextarea.vue
@@ -153,7 +153,7 @@ onMounted(() => {
 	color: var(--fg);
 	background: var(--panel);
 	border: solid 1px var(--panel);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	outline: none;
 	box-shadow: none;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/components/MkToast.vue b/packages/frontend/src/components/MkToast.vue
index 78eccd0618..3b26b50a0b 100644
--- a/packages/frontend/src/components/MkToast.vue
+++ b/packages/frontend/src/components/MkToast.vue
@@ -66,7 +66,7 @@ onMounted(() => {
 	max-width: calc(100% - 32px);
 	width: min-content;
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	overflow: clip;
 	text-align: center;
 	pointer-events: none;
diff --git a/packages/frontend/src/components/MkTooltip.vue b/packages/frontend/src/components/MkTooltip.vue
index d21c6317aa..eeb9325a29 100644
--- a/packages/frontend/src/components/MkTooltip.vue
+++ b/packages/frontend/src/components/MkTooltip.vue
@@ -106,7 +106,7 @@ onUnmounted(() => {
 	padding: 8px 12px;
 	box-sizing: border-box;
 	text-align: center;
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 	border: solid 0.5px var(--divider);
 	pointer-events: none;
 	transform-origin: center center;
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 9cec4009c8..7093283d45 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -231,7 +231,7 @@ onUnmounted(() => {
 	display: block;
 	font-size: 14px;
 	box-shadow: 0 0 0 1px var(--divider);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	overflow: clip;
 
 	&:hover {
diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue
index 70c2a37b53..978c5005c8 100644
--- a/packages/frontend/src/components/MkUserCardMini.vue
+++ b/packages/frontend/src/components/MkUserCardMini.vue
@@ -50,7 +50,7 @@ onMounted(() => {
 	align-items: center;
 	padding: 16px;
 	background: var(--panel);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 
 	> :global(.avatar) {
 		display: block;
diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue
index 6bb2fc8957..6219aa717b 100644
--- a/packages/frontend/src/components/MkUserInfo.vue
+++ b/packages/frontend/src/components/MkUserInfo.vue
@@ -100,7 +100,7 @@ defineProps<{
 	color: #fff;
 	background: rgba(0, 0, 0, 0.7);
 	font-size: 0.7em;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 
 .description {
diff --git a/packages/frontend/src/components/MkUserOnlineIndicator.vue b/packages/frontend/src/components/MkUserOnlineIndicator.vue
index 8b792fe496..ac50d73cda 100644
--- a/packages/frontend/src/components/MkUserOnlineIndicator.vue
+++ b/packages/frontend/src/components/MkUserOnlineIndicator.vue
@@ -37,7 +37,10 @@ const text = $computed(() => {
 <style lang="scss" module>
 .root {
 	box-shadow: 0 0 0 3px var(--panel);
-	border-radius: 120%; // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
+
+	// sharkey(ShittyKopper): the comment mentions something about 100% radius not behaving correctly on blink.
+	// couldn't reproduce, assuming the 120% here was just an old workaround
+	border-radius: var(--radius-full); // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
 
 	&.status_online {
 		background: #58d4c9;
diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue
index 85954d4193..8665b49f0c 100644
--- a/packages/frontend/src/components/MkUserPopup.vue
+++ b/packages/frontend/src/components/MkUserPopup.vue
@@ -146,7 +146,7 @@ onMounted(() => {
 	color: #fff;
 	background: rgba(0, 0, 0, 0.7);
 	font-size: 0.7em;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 
 .locked:first-child {
@@ -157,7 +157,7 @@ onMounted(() => {
 	color: #fff;
 	background: rgba(0, 0, 0, 0.7);
 	font-size: 0.7em;
-	border-radius: 5px;
+	border-radius: var(--radius-xs);
 }
 
 .locked:not(:first-child) {
@@ -168,7 +168,7 @@ onMounted(() => {
 	color: #fff;
 	background: rgba(0, 0, 0, 0.7);
 	font-size: 0.7em;
-	border-radius: 5px;
+	border-radius: var(--radius-xs);
 }
 
 .avatarBack {
@@ -249,7 +249,7 @@ onMounted(() => {
 	right: 44px;
 	padding: 6px;
 	background: var(--panel);
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 }
 
 .follow {
diff --git a/packages/frontend/src/components/MkVisibilityPicker.vue b/packages/frontend/src/components/MkVisibilityPicker.vue
index 675de076a6..c7484b658c 100644
--- a/packages/frontend/src/components/MkVisibilityPicker.vue
+++ b/packages/frontend/src/components/MkVisibilityPicker.vue
@@ -80,7 +80,7 @@ function choose(visibility: typeof Misskey.noteVisibilities[number]): void {
 	&.asDrawer {
 		padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
 		width: 100%;
-		border-radius: 24px;
+		border-radius: var(--radius-lg);
 		border-bottom-right-radius: 0;
 		border-bottom-left-radius: 0;
 
diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue
index 138d7953a7..b11bbf7944 100644
--- a/packages/frontend/src/components/MkVisitorDashboard.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.vue
@@ -172,7 +172,7 @@ function exploreOtherServers() {
 	right: 16px;
 	width: 32px;
 	height: 32px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	font-size: 18px;
 }
 
diff --git a/packages/frontend/src/components/MkWidgets.vue b/packages/frontend/src/components/MkWidgets.vue
index 48ec702823..c5cde16e67 100644
--- a/packages/frontend/src/components/MkWidgets.vue
+++ b/packages/frontend/src/components/MkWidgets.vue
@@ -162,7 +162,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 		height: 32px;
 		color: #fff;
 		background: rgba(#000, 0.7);
-		border-radius: 4px;
+		border-radius: var(--radius-xs);
 	}
 
 	&Config {
diff --git a/packages/frontend/src/components/SkOldNoteWindow.vue b/packages/frontend/src/components/SkOldNoteWindow.vue
index 283496ac91..354e8d4a67 100644
--- a/packages/frontend/src/components/SkOldNoteWindow.vue
+++ b/packages/frontend/src/components/SkOldNoteWindow.vue
@@ -203,7 +203,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 	font-size: 80%;
 	line-height: 1;
 	border: solid 0.5px var(--divider);
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 }
 
 .noteHeaderInfo {
@@ -264,7 +264,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 .quoteNote {
 	padding: 16px;
 	border: dashed 1px var(--renote);
-	border-radius: 5px;
+	border-radius: var(--radius-xs);
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/form/link.vue b/packages/frontend/src/components/form/link.vue
index 365ce6de66..67fc87e370 100644
--- a/packages/frontend/src/components/form/link.vue
+++ b/packages/frontend/src/components/form/link.vue
@@ -52,7 +52,7 @@ const props = defineProps<{
 	box-sizing: border-box;
 	padding: 10px 14px;
 	background: var(--buttonBg);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	font-size: 0.9em;
 
 	&:hover {
diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue
index 280c66afbb..3e092753a3 100644
--- a/packages/frontend/src/components/global/MkAd.vue
+++ b/packages/frontend/src/components/global/MkAd.vue
@@ -169,7 +169,7 @@ function reduceFrequency(): void {
 	display: block;
 	object-fit: contain;
 	margin: auto;
-	border-radius: 5px;
+	border-radius: var(--radius-xs);
 }
 
 .i {
@@ -179,7 +179,7 @@ function reduceFrequency(): void {
 	display: grid;
 	place-content: center;
 	background: var(--panel);
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	padding: 2px;
 }
 
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index 8ca0991c0b..e59a3f8037 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -169,7 +169,7 @@ watch(() => props.user.avatarBlurhash, () => {
 	left: 0;
 	right: 0;
 	top: 0;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	z-index: 1;
 	overflow: clip;
 	object-fit: cover;
@@ -187,10 +187,10 @@ watch(() => props.user.avatarBlurhash, () => {
 }
 
 .square {
-	border-radius: 5px;
+	border-radius: 20%;
 
 	> .inner {
-		border-radius: 5px;
+		border-radius: 20%;
 	}
 }
 
diff --git a/packages/frontend/src/components/global/MkError.vue b/packages/frontend/src/components/global/MkError.vue
index efb7b75fb9..47b42467d6 100644
--- a/packages/frontend/src/components/global/MkError.vue
+++ b/packages/frontend/src/components/global/MkError.vue
@@ -44,6 +44,6 @@ const emit = defineEmits<{
   width: 128px;
 	height: 128px;
 	margin-bottom: 16px;
-	border-radius: 4px;
+	border-radius: var(--radius-md);
 }
 </style>
diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.vue b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
index b98750da44..320ece4efd 100644
--- a/packages/frontend/src/components/global/MkPageHeader.tabs.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
@@ -245,7 +245,7 @@ onUnmounted(() => {
 	bottom: 0;
 	height: 3px;
 	background: var(--accent);
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 	transition: none;
 	pointer-events: none;
 
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 5b0e7be0e0..2134e9fad3 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -227,7 +227,7 @@ onUnmounted(() => {
 	width: calc(var(--height) - (var(--margin)));
 	box-sizing: border-box;
 	position: relative;
-	border-radius: 5px;
+	border-radius: var(--radius-xs);
 
 	&:hover {
 		background: rgba(0, 0, 0, 0.05);
diff --git a/packages/frontend/src/local-storage.ts b/packages/frontend/src/local-storage.ts
index 0d73885b68..3023471b14 100644
--- a/packages/frontend/src/local-storage.ts
+++ b/packages/frontend/src/local-storage.ts
@@ -21,6 +21,7 @@ type Keys =
 	'colorScheme' |
 	'useSystemFont' |
 	'fontSize' |
+	'cornerRadius' |
 	'ui' |
 	'ui_temp' |
 	'locale' |
diff --git a/packages/frontend/src/pages/_error_.vue b/packages/frontend/src/pages/_error_.vue
index 037d6c94a8..fe27206937 100644
--- a/packages/frontend/src/pages/_error_.vue
+++ b/packages/frontend/src/pages/_error_.vue
@@ -82,6 +82,6 @@ definePageMetadata({
 	vertical-align: bottom;
 	height: 128px;
 	margin-bottom: 24px;
-	border-radius: 4px;
+	border-radius: var(--radius-md);
 }
 </style>
diff --git a/packages/frontend/src/pages/about-sharkey.vue b/packages/frontend/src/pages/about-sharkey.vue
index 1e235bf70e..2054783695 100644
--- a/packages/frontend/src/pages/about-sharkey.vue
+++ b/packages/frontend/src/pages/about-sharkey.vue
@@ -220,7 +220,7 @@ definePageMetadata({
 				display: block;
 				width: 80px;
 				margin: 0 auto;
-				border-radius: 4px;
+				border-radius: var(--radius-md);
 				position: relative;
 				z-index: 1;
 				transform: translateX(-10%);
@@ -271,7 +271,7 @@ definePageMetadata({
 	align-items: center;
 	padding: 12px;
 	background: var(--buttonBg);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 
 	&:hover {
 		text-decoration: none;
@@ -286,7 +286,7 @@ definePageMetadata({
 
 .contributorAvatar {
 	width: 30px;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 }
 
 .contributorUsername {
@@ -304,12 +304,12 @@ definePageMetadata({
 	align-items: center;
 	padding: 12px;
 	background: var(--buttonBg);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 
 .patronIcon {
 	width: 24px;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 }
 
 .patronName {
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index 7b1975807b..9028515975 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -168,7 +168,7 @@ definePageMetadata(computed(() => ({
 <style lang="scss" module>
 .banner {
 	text-align: center;
-	border-radius: 5px;
+	border-radius: var(--radius);
 	overflow: clip;
 	background-size: cover;
 	background-position: center center;
@@ -178,7 +178,7 @@ definePageMetadata(computed(() => ({
 	display: block;
 	margin: 16px auto 0 auto;
 	height: 64px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 
 .bannerName {
@@ -217,7 +217,7 @@ definePageMetadata(computed(() => ({
 		font-weight: bold;
 		align-items: center;
 		justify-content: center;
-		border-radius: 4px;
+		border-radius: var(--radius-ellipse);
 	}
 }
 
diff --git a/packages/frontend/src/pages/admin-user.vue b/packages/frontend/src/pages/admin-user.vue
index 5c26c94022..5d480f1500 100644
--- a/packages/frontend/src/pages/admin-user.vue
+++ b/packages/frontend/src/pages/admin-user.vue
@@ -546,7 +546,7 @@ definePageMetadata(computed(() => ({
 			> .suspended, > .silenced, > .moderator {
 				display: inline-block;
 				border: solid 1px;
-				border-radius: 5px;
+				border-radius: var(--radius-sm);
 				padding: 2px 6px;
 				font-size: 85%;
 			}
@@ -638,7 +638,7 @@ definePageMetadata(computed(() => ({
 .announcementItem {
 	display: flex;
 	padding: 8px 12px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	cursor: pointer;
 }
 </style>
diff --git a/packages/frontend/src/pages/admin/_header_.vue b/packages/frontend/src/pages/admin/_header_.vue
index 6b619249da..43bfbeb870 100644
--- a/packages/frontend/src/pages/admin/_header_.vue
+++ b/packages/frontend/src/pages/admin/_header_.vue
@@ -181,7 +181,7 @@ onUnmounted(() => {
 			width: calc(var(--height) - (var(--margin) * 2));
 			box-sizing: border-box;
 			position: relative;
-			border-radius: 5px;
+			border-radius: var(--radius-xs);
 
 			&:hover {
 				background: rgba(0, 0, 0, 0.05);
@@ -286,7 +286,7 @@ onUnmounted(() => {
 			bottom: 0;
 			height: 3px;
 			background: var(--accent);
-			border-radius: 4px;
+			border-radius: var(--radius-ellipse);
 			transition: all 0.2s ease;
 			pointer-events: none;
 		}
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 42c2281971..a42e9809ed 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -369,7 +369,7 @@ defineExpose({
 					display: block;
 					margin: auto;
 					height: 42px;
-					border-radius: 5px;
+					border-radius: var(--radius-sm);
 				}
 			}
 		}
diff --git a/packages/frontend/src/pages/admin/modlog.ModLog.vue b/packages/frontend/src/pages/admin/modlog.ModLog.vue
index d41834836c..a6612f17d1 100644
--- a/packages/frontend/src/pages/admin/modlog.ModLog.vue
+++ b/packages/frontend/src/pages/admin/modlog.ModLog.vue
@@ -149,7 +149,7 @@ const props = defineProps<{
 .diff {
 	background: #fff;
 	color: #000;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/pages/admin/overview.federation.vue b/packages/frontend/src/pages/admin/overview.federation.vue
index 16bf6985ea..33dbbd0d84 100644
--- a/packages/frontend/src/pages/admin/overview.federation.vue
+++ b/packages/frontend/src/pages/admin/overview.federation.vue
@@ -146,7 +146,7 @@ onMounted(async () => {
 					margin-right: 12px;
 					background: var(--accentedBg);
 					color: var(--accent);
-					border-radius: 5px;
+					border-radius: var(--radius);
 				}
 
 				&.sub {
diff --git a/packages/frontend/src/pages/admin/overview.stats.vue b/packages/frontend/src/pages/admin/overview.stats.vue
index 580bfb780b..563d8988a8 100644
--- a/packages/frontend/src/pages/admin/overview.stats.vue
+++ b/packages/frontend/src/pages/admin/overview.stats.vue
@@ -115,7 +115,7 @@ onMounted(async () => {
 				margin-right: 12px;
 				background: var(--accentedBg);
 				color: var(--accent);
-				border-radius: 5px;
+				border-radius: var(--radius);
 			}
 
 			&.users {
diff --git a/packages/frontend/src/pages/admin/server-rules.vue b/packages/frontend/src/pages/admin/server-rules.vue
index af1caa87c1..4302bde91d 100644
--- a/packages/frontend/src/pages/admin/server-rules.vue
+++ b/packages/frontend/src/pages/admin/server-rules.vue
@@ -104,7 +104,7 @@ definePageMetadata({
 	height: 28px;
 	align-items: center;
 	justify-content: center;
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 	margin-right: 8px;
 }
 
@@ -119,7 +119,7 @@ definePageMetadata({
 	height: 40px;
 	color: var(--error);
 	margin-left: auto;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 
 	&:hover {
 		background: var(--X5);
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index c84d35c7d0..97a85d4345 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -112,7 +112,7 @@ definePageMetadata(computed(() => antenna ? {
 	display: block;
 	margin: var(--margin) auto 0 auto;
 	padding: 8px 16px;
-	border-radius: 5px;
+	border-radius: var(--radius-xl);
 }
 
 .tl {
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 89127bd010..440c9c8da4 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -267,7 +267,7 @@ definePageMetadata(computed(() => channel ? {
 	padding: 8px 12px;
 	font-size: 80%;
 	background: rgba(0, 0, 0, 0.7);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	color: #fff;
 }
 
@@ -282,7 +282,7 @@ definePageMetadata(computed(() => channel ? {
 	left: 16px;
 	background: rgba(0, 0, 0, 0.7);
 	color: var(--warn);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	font-weight: bold;
 	font-size: 1em;
 	padding: 4px 7px;
diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue
index 83c61f74e1..2fcf35f36e 100644
--- a/packages/frontend/src/pages/drive.file.info.vue
+++ b/packages/frontend/src/pages/drive.file.info.vue
@@ -221,7 +221,7 @@ onMounted(async () => {
 
 	.fileQuickActionsOthersButton {
 		padding: .5rem;
-		border-radius: 99rem;
+		border-radius: var(--radius-ellipse);
 
 		&:hover,
 		&:focus-visible {
diff --git a/packages/frontend/src/pages/emoji-edit-dialog.vue b/packages/frontend/src/pages/emoji-edit-dialog.vue
index abba31f1ff..b4ae855d5d 100644
--- a/packages/frontend/src/pages/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/emoji-edit-dialog.vue
@@ -206,7 +206,7 @@ async function del() {
 
 .imgContainer {
 	padding: 8px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 
 .img {
diff --git a/packages/frontend/src/pages/emojis.emoji.vue b/packages/frontend/src/pages/emojis.emoji.vue
index 210a0fcf8f..f787b12097 100644
--- a/packages/frontend/src/pages/emojis.emoji.vue
+++ b/packages/frontend/src/pages/emojis.emoji.vue
@@ -61,7 +61,7 @@ function menu(ev) {
 	padding: 12px;
 	text-align: left;
 	background: var(--panel);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 
 	&:hover {
 		border-color: var(--accent);
diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue
index 1686718f2c..7546804a7b 100644
--- a/packages/frontend/src/pages/follow-requests.vue
+++ b/packages/frontend/src/pages/follow-requests.vue
@@ -87,7 +87,7 @@ definePageMetadata(computed(() => ({
 			margin: 0 12px 0 0;
 			width: 42px;
 			height: 42px;
-			border-radius: 5px;
+			border-radius: var(--radius-sm);
 		}
 
 		> .body {
diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue
index a3276dba6e..69f97a50c3 100644
--- a/packages/frontend/src/pages/instance-info.vue
+++ b/packages/frontend/src/pages/instance-info.vue
@@ -254,7 +254,7 @@ definePageMetadata({
 		display: block;
 		margin: 0 16px 0 0;
 		height: 64px;
-		border-radius: 5px;
+		border-radius: var(--radius-sm);
 	}
 
 	> .name {
diff --git a/packages/frontend/src/pages/invite.vue b/packages/frontend/src/pages/invite.vue
index 2c0ed41450..a5bdc29dbb 100644
--- a/packages/frontend/src/pages/invite.vue
+++ b/packages/frontend/src/pages/invite.vue
@@ -114,6 +114,6 @@ definePageMetadata({
 	width: 128px;
 	height: 128px;
 	margin-bottom: 16px;
-	border-radius: 4px;
+	border-radius: var(--radius-md);
 }
 </style>
diff --git a/packages/frontend/src/pages/list.vue b/packages/frontend/src/pages/list.vue
index 9309ebc08f..cf69e6a71d 100644
--- a/packages/frontend/src/pages/list.vue
+++ b/packages/frontend/src/pages/list.vue
@@ -141,7 +141,7 @@ definePageMetadata(computed(() => list ? {
   width: 128px;
 	height: 128px;
 	margin-bottom: 16px;
-	border-radius: 4px;
+	border-radius: var(--radius-md);
 }
 
 .button {
diff --git a/packages/frontend/src/pages/my-antennas/index.vue b/packages/frontend/src/pages/my-antennas/index.vue
index b1d92e42e8..eb91823234 100644
--- a/packages/frontend/src/pages/my-antennas/index.vue
+++ b/packages/frontend/src/pages/my-antennas/index.vue
@@ -74,7 +74,7 @@ onActivated(() => {
 	display: block;
 	padding: 16px;
 	border: solid 1px var(--divider);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 
 	&:hover {
 		border: solid 1px var(--accent);
diff --git a/packages/frontend/src/pages/my-lists/index.vue b/packages/frontend/src/pages/my-lists/index.vue
index 01cd0d8aa9..b14b605db9 100644
--- a/packages/frontend/src/pages/my-lists/index.vue
+++ b/packages/frontend/src/pages/my-lists/index.vue
@@ -84,7 +84,7 @@ onActivated(() => {
 	display: block;
 	padding: 16px;
 	border: solid 1px var(--divider);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	margin-bottom: 8px;
 
 	&:hover {
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index 7880e3361b..c43b5f900f 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -148,7 +148,7 @@ definePageMetadata(computed(() => note ? {
 .loadPrev {
 	min-width: 0;
 	margin: 0 auto;
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 }
 
 .loadNext {
diff --git a/packages/frontend/src/pages/page-editor/page-editor.container.vue b/packages/frontend/src/pages/page-editor/page-editor.container.vue
index cb0af1d548..10effdda1e 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.container.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.container.vue
@@ -63,7 +63,7 @@ function remove() {
 	overflow: hidden;
 	background: var(--panel);
 	border: solid 2px var(--X12);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 
 	&:hover {
 		border: solid 2px var(--X13);
diff --git a/packages/frontend/src/pages/role.vue b/packages/frontend/src/pages/role.vue
index ec58203879..c62ad25882 100644
--- a/packages/frontend/src/pages/role.vue
+++ b/packages/frontend/src/pages/role.vue
@@ -104,7 +104,7 @@ definePageMetadata(computed(() => ({
   width: 128px;
 	height: 128px;
 	margin-bottom: 16px;
-	border-radius: 4px;
+	border-radius: var(--radius-md);
 }
 </style>
 
diff --git a/packages/frontend/src/pages/settings/apps.vue b/packages/frontend/src/pages/settings/apps.vue
index c06db27245..db8dcd82f5 100644
--- a/packages/frontend/src/pages/settings/apps.vue
+++ b/packages/frontend/src/pages/settings/apps.vue
@@ -93,7 +93,7 @@ definePageMetadata({
 	margin: 0 12px 0 0;
 	width: 50px;
 	height: 50px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 
 .appBody {
diff --git a/packages/frontend/src/pages/settings/drive-cleaner.vue b/packages/frontend/src/pages/settings/drive-cleaner.vue
index 791d76d1b4..553cad7b6a 100644
--- a/packages/frontend/src/pages/settings/drive-cleaner.vue
+++ b/packages/frontend/src/pages/settings/drive-cleaner.vue
@@ -152,7 +152,7 @@ definePageMetadata({
 	height: 12px;
 	background: rgba(0, 0, 0, 0.1);
 	overflow: clip;
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 }
 
 .meterValue {
diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue
index 0c6effbaa2..4d390de259 100644
--- a/packages/frontend/src/pages/settings/drive.vue
+++ b/packages/frontend/src/pages/settings/drive.vue
@@ -148,12 +148,12 @@ definePageMetadata({
 .meter {
 	height: 10px;
 	background: rgba(0, 0, 0, 0.1);
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 	overflow: clip;
 }
 
 .meterValue {
 	height: 100%;
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 }
 </style>
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 05ff430915..22c24bec1c 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -142,6 +142,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<option value="2"><span style="font-size: 16px;">Aa</span></option>
 				<option value="3"><span style="font-size: 17px;">Aa</span></option>
 			</MkRadios>
+
+			<MkRadios v-model="cornerRadius">
+				<template #label>{{ i18n.ts.cornerRadius }}</template>
+				<option :value="null">Sharkey</option>
+				<option value="misskey">Misskey</option>
+			</MkRadios>
 		</div>
 	</FormSection>
 
@@ -212,6 +218,7 @@ import { claimAchievement } from '@/scripts/achievements.js';
 
 const lang = ref(miLocalStorage.getItem('lang'));
 const fontSize = ref(miLocalStorage.getItem('fontSize'));
+const cornerRadius = ref(miLocalStorage.getItem('cornerRadius'));
 const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null);
 
 async function reloadAsk() {
@@ -277,6 +284,14 @@ watch(fontSize, () => {
 	}
 });
 
+watch(cornerRadius, () => {
+	if (cornerRadius.value == null) {
+		miLocalStorage.removeItem('cornerRadius');
+	} else {
+		miLocalStorage.setItem('cornerRadius', cornerRadius.value);
+	}
+});
+
 watch(useSystemFont, () => {
 	if (useSystemFont.value) {
 		miLocalStorage.setItem('useSystemFont', 't');
@@ -288,6 +303,7 @@ watch(useSystemFont, () => {
 watch([
 	lang,
 	fontSize,
+	cornerRadius,
 	useSystemFont,
 	enableInfiniteScroll,
 	squareAvatars,
diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue
index b347d9555e..ecb7c68f73 100644
--- a/packages/frontend/src/pages/settings/preferences-backups.vue
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@@ -114,6 +114,7 @@ type Profile = {
 		hot: Record<keyof typeof defaultStoreSaveKeys, unknown>;
 		cold: Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
 		fontSize: string | null;
+		cornerRadius: string | null;
 		useSystemFont: 't' | null;
 		wallpaper: string | null;
 	};
@@ -171,6 +172,7 @@ function getSettings(): Profile['settings'] {
 		hot,
 		cold,
 		fontSize: miLocalStorage.getItem('fontSize'),
+		cornerRadius: miLocalStorage.getItem('cornerRadius'),
 		useSystemFont: miLocalStorage.getItem('useSystemFont') as 't' | null,
 		wallpaper: miLocalStorage.getItem('wallpaper'),
 	};
@@ -284,6 +286,13 @@ async function applyProfile(id: string): Promise<void> {
 		miLocalStorage.removeItem('fontSize');
 	}
 
+	// cornerRadius
+	if (settings.cornerRadius) {
+		miLocalStorage.setItem('cornerRadius', settings.cornerRadius);
+	} else {
+		miLocalStorage.removeItem('cornerRadius');
+	}
+
 	// useSystemFont
 	if (settings.useSystemFont) {
 		miLocalStorage.setItem('useSystemFont', settings.useSystemFont);
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index c79e99cda7..22b3d7a529 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -340,7 +340,7 @@ definePageMetadata({
 	background-size: cover;
 	background-position: center;
 	border: solid 1px var(--divider);
-	border-radius: 5px;
+	border-radius: var(--radius);
 	overflow: clip;
 }
 
@@ -428,7 +428,7 @@ definePageMetadata({
 	cursor: pointer;
 	padding: 16px 16px 28px 16px;
 	border: solid 2px var(--divider);
-	border-radius: 8px;
+	border-radius: var(--radius-sm);
 	text-align: center;
 	font-size: 90%;
 	overflow: clip;
diff --git a/packages/frontend/src/pages/settings/reaction.vue b/packages/frontend/src/pages/settings/reaction.vue
index 12d37c9da2..183d2bfb47 100644
--- a/packages/frontend/src/pages/settings/reaction.vue
+++ b/packages/frontend/src/pages/settings/reaction.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div class="_gaps_m">
 	<FromSlot>
 		<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
-		<div v-panel style="border-radius: 5px;">
+		<div v-panel style="border-radius: var(--radius-sm);">
 			<Sortable v-model="reactions" :class="$style.reactions" :itemKey="item => item" :animation="150" :delay="100" :delayOnTouchOnly="true">
 				<template #item="{element}">
 					<button class="_button" :class="$style.reactionsItem" @click="remove(element, $event)">
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
index 1f67d37855..eb69912609 100644
--- a/packages/frontend/src/pages/settings/theme.vue
+++ b/packages/frontend/src/pages/settings/theme.vue
@@ -172,7 +172,7 @@ definePageMetadata({
 
 <style lang="scss" scoped>
 .rfqxtzch {
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 
 	> .toggle {
 		position: relative;
@@ -246,7 +246,7 @@ definePageMetadata({
 				background-color: #E8CDA5;
 				opacity: 0;
 				transition: opacity 200ms ease-in-out !important;
-				border-radius: 100%;
+				border-radius: var(--radius-full);
 			}
 
 			.crater--1 {
diff --git a/packages/frontend/src/pages/theme-editor.vue b/packages/frontend/src/pages/theme-editor.vue
index 80a5946180..f31666c8c1 100644
--- a/packages/frontend/src/pages/theme-editor.vue
+++ b/packages/frontend/src/pages/theme-editor.vue
@@ -244,7 +244,7 @@ definePageMetadata({
 				position: relative;
 				width: 64px;
 				height: 64px;
-				border-radius: 5px;
+				border-radius: var(--radius-sm);
 
 				> .preview {
 					position: absolute;
@@ -255,7 +255,7 @@ definePageMetadata({
 					margin: auto;
 					width: 42px;
 					height: 42px;
-					border-radius: 4px;
+					border-radius: var(--radius-xs);
 					box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
 					transition: transform 0.15s ease;
 				}
@@ -271,10 +271,10 @@ definePageMetadata({
 				}
 
 				&.rounded {
-					border-radius: 4px;
+					border-radius: var(--radius-ellipse);
 
 					> .preview {
-						border-radius: 4px;
+						border-radius: var(--radius-ellipse);
 					}
 				}
 
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 8f8021f009..4178677d78 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -259,7 +259,7 @@ definePageMetadata(computed(() => ({
 	display: block;
 	margin: var(--margin) auto 0 auto;
 	padding: 8px 16px;
-	border-radius: 5px;
+	border-radius: var(--radius-xl);
 }
 
 .postForm {
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index e4bdfb1103..6812802ef7 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -92,7 +92,7 @@ definePageMetadata(computed(() => list ? {
 	display: block;
 	margin: var(--margin) auto 0 auto;
 	padding: 8px 16px;
-	border-radius: 5px;
+	border-radius: var(--radius-xl);
 }
 
 .tl {
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index cf170e79d9..f77165db24 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -425,7 +425,7 @@ onUnmounted(() => {
 						color: #fff;
 						background: rgba(0, 0, 0, 0.7);
 						font-size: 0.7em;
-						border-radius: 5px;
+						border-radius: var(--radius-sm);
 					}
 
 					> .actions {
@@ -436,7 +436,7 @@ onUnmounted(() => {
 						backdrop-filter: var(--blur, blur(8px));
 						background: rgba(0, 0, 0, 0.2);
 						padding: 8px;
-						border-radius: 5px;
+						border-radius: var(--radius-lg);
 
 						> .menu {
 							vertical-align: bottom;
@@ -488,7 +488,7 @@ onUnmounted(() => {
 								color: #fff;
 								-webkit-backdrop-filter: var(--blur, blur(8px));
 								backdrop-filter: var(--blur, blur(8px));
-								border-radius: 5px;
+								border-radius: var(--radius-lg);
 								padding: 4px 8px;
 								font-size: 80%;
 							}
@@ -532,7 +532,7 @@ onUnmounted(() => {
 
 					> .role {
 						border: solid 1px var(--color, var(--divider));
-						border-radius: 4px;
+						border-radius: var(--radius-ellipse);
 						margin-right: 4px;
 						padding: 3px 8px;
 					}
@@ -547,7 +547,7 @@ onUnmounted(() => {
 					background: transparent;
 					color: var(--fg);
 					border: 1px solid var(--divider);
-					border-radius: 5px;
+					border-radius: var(--radius-sm);
 					padding: 8px;
 					line-height: 0;
 
@@ -755,9 +755,10 @@ onUnmounted(() => {
 	padding: calc(var(--margin) / 2) 0;
 	background: color-mix(in srgb, var(--bg) 65%, transparent);
 	backdrop-filter: var(--blur, blur(15px));
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
+
 	> button {
-		border-radius: 5px;
+		border-radius: var(--radius-sm);
 		margin-left: 0.4rem;
 		margin-right: 0.4rem;
 	}
diff --git a/packages/frontend/src/pages/user/index.files.vue b/packages/frontend/src/pages/user/index.files.vue
index 2049b8b920..d6d90c46e0 100644
--- a/packages/frontend/src/pages/user/index.files.vue
+++ b/packages/frontend/src/pages/user/index.files.vue
@@ -89,7 +89,7 @@ onMounted(() => {
 
 .img {
 	height: 128px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/pages/user/lists.vue b/packages/frontend/src/pages/user/lists.vue
index 474237f018..c58a8abdfb 100644
--- a/packages/frontend/src/pages/user/lists.vue
+++ b/packages/frontend/src/pages/user/lists.vue
@@ -45,7 +45,7 @@ const pagination = {
 	display: block;
 	padding: 16px;
 	border: solid 1px var(--divider);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	margin-bottom: 8px;
 
 	&:hover {
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index 665dbed7b9..2563f81689 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -155,7 +155,7 @@ os.apiGet('federation/instances', {
 		background: var(--acrylicPanel);
 		-webkit-backdrop-filter: var(--blur, blur(15px));
 		backdrop-filter: var(--blur, blur(15px));
-		border-radius: 4px;
+		border-radius: var(--radius-ellipse);
 		overflow: clip;
 		width: 800px;
 		padding: 8px 0;
@@ -175,14 +175,14 @@ os.apiGet('federation/instances', {
 	padding: 6px 12px 6px 6px;
 	margin: 0 10px 0 0;
 	background: var(--panel);
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 
 	> :global(.icon) {
 		display: inline-block;
 		width: 20px;
 		height: 20px;
 		margin-right: 5px;
-		border-radius: 4px;
+		border-radius: var(--radius-ellipse);
 	}
 }
 </style>
diff --git a/packages/frontend/src/pages/welcome.timeline.vue b/packages/frontend/src/pages/welcome.timeline.vue
index 823f713d39..af12532d34 100644
--- a/packages/frontend/src/pages/welcome.timeline.vue
+++ b/packages/frontend/src/pages/welcome.timeline.vue
@@ -88,7 +88,7 @@ onUpdated(() => {
 	padding: 16px;
 	margin: 0 0 0 auto;
 	max-width: max-content;
-	border-radius: 4px;
+	border-radius: var(--radius-md);
 }
 
 .richcontent {
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 4d0b3a8beb..39c0a4c56b 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -15,7 +15,15 @@
  */
 
 :root {
+	--radius-xs: 5px;
+	--radius-sm: 5px;
 	--radius: 5px;
+	--radius-md: 5px;
+	--radius-lg: 5px;
+	--radius-xl: 5px;
+	--radius-ellipse: 5px;
+	--radius-full: 5px;
+
 	--marginFull: 16px;
 	--marginHalf: 10px;
 
@@ -32,6 +40,17 @@
 	//--ad: rgb(255 169 0 / 10%);
 }
 
+html.radius-misskey {
+	--radius-xs: 4px;
+	--radius-sm: 8px;
+	--radius: 12px;
+	--radius-md: 16px;
+	--radius-lg: 24px;
+	--radius-xl: 32px;
+	--radius-ellipse: 999px;
+	--radius-full: 100%;
+}
+
 ::selection {
 	color: var(--fgOnAccent);
 	background-color: var(--accent);
@@ -159,7 +178,7 @@ hr {
 	display: inline-block;
 	width: 1em;
 	height: 1em;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	background: currentColor;
 }
 
@@ -364,7 +383,7 @@ hr {
 	padding: 2px 3px;
 	color: var(--accent);
 	border: solid 1px var(--accent);
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 	vertical-align: top;
 }
 
@@ -404,7 +423,7 @@ hr {
 		vertical-align: bottom;
 		height: 128px;
 		margin-bottom: 16px;
-		border-radius: 4px;
+		border-radius: var(--radius-md);
 	}
 }
 
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index 9ad3cf8b2c..4c46fd794f 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -149,7 +149,7 @@ function more() {
 		left: 0;
 		right: 0;
 		bottom: 0;
-		border-radius: 4px;
+		border-radius: var(--radius-ellipse);
 		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 	}
 
@@ -236,7 +236,7 @@ function more() {
 			left: 0;
 			right: 0;
 			bottom: 0;
-			border-radius: 4px;
+			border-radius: var(--radius-ellipse);
 			background: var(--accentedBg);
 		}
 	}
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 33c91f12df..dbad5c32a1 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -202,7 +202,7 @@ function more(ev: MouseEvent) {
 			left: 0;
 			right: 0;
 			bottom: 0;
-			border-radius: 4px;
+			border-radius: var(--radius-ellipse);
 			background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 		}
 
@@ -296,7 +296,7 @@ function more(ev: MouseEvent) {
 				left: 0;
 				right: 0;
 				bottom: 0;
-				border-radius: 4px;
+				border-radius: var(--radius-ellipse);
 				background: var(--accentedBg);
 			}
 		}
@@ -388,7 +388,7 @@ function more(ev: MouseEvent) {
 			margin: auto;
 			width: 52px;
 			aspect-ratio: 1/1;
-			border-radius: 100%;
+			border-radius: var(--radius-full);
 			background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 		}
 
@@ -457,7 +457,7 @@ function more(ev: MouseEvent) {
 				left: 0;
 				right: 0;
 				bottom: 0;
-				border-radius: 4px;
+				border-radius: var(--radius-ellipse);
 				background: var(--accentedBg);
 			}
 
diff --git a/packages/frontend/src/ui/_common_/notification.vue b/packages/frontend/src/ui/_common_/notification.vue
index 4ca900ff12..dc1a9a1b24 100644
--- a/packages/frontend/src/ui/_common_/notification.vue
+++ b/packages/frontend/src/ui/_common_/notification.vue
@@ -22,7 +22,7 @@ defineProps<{
 <style lang="scss" module>
 .root {
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	overflow: clip;
 	contain: content;
 }
diff --git a/packages/frontend/src/ui/_common_/upload.vue b/packages/frontend/src/ui/_common_/upload.vue
index 676dd1d542..eb8c114f17 100644
--- a/packages/frontend/src/ui/_common_/upload.vue
+++ b/packages/frontend/src/ui/_common_/upload.vue
@@ -40,7 +40,7 @@ const zIndex = os.claimZIndex('high');
 	padding: 16px 20px;
 	pointer-events: none;
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 .mk-uploader:empty {
   display: none;
@@ -116,7 +116,7 @@ const zIndex = os.claimZIndex('high');
   display: block;
   background: transparent;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-xs);
   overflow: hidden;
   grid-column: 2/3;
   grid-row: 2/3;
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index e10e1e4e3f..40595ed039 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -451,7 +451,7 @@ body {
 	width: 100%;
 	max-width: 60px;
 	margin: auto;
-	border-radius: 5px;
+	border-radius: var(--radius-full);
 	background: var(--panel);
 	color: var(--fg);
 
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 82505ee145..7780c988de 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -255,7 +255,7 @@ function onDrop(ev) {
 	height: 100%;
 	overflow: clip;
 	contain: strict;
-	border-radius: 5px;
+	border-radius: var(--radius);
 
 	&.draghover {
 		&:after {
@@ -356,7 +356,7 @@ function onDrop(ev) {
 	width: 3px;
 	height: calc(100% - 24px);
 	background: var(--accent);
-	border-radius: 4px;
+	border-radius: var(--radius-ellipse);
 }
 
 .tabShape {
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index ecdc1a79e4..52b88c842f 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -350,7 +350,7 @@ $widgets-hide-threshold: 1090px;
 	right: 32px;
 	width: 64px;
 	height: 64px;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
 	font-size: 22px;
 	background: var(--panel);
@@ -410,7 +410,7 @@ $widgets-hide-threshold: 1090px;
 	width: 100%;
 	max-width: 60px;
 	margin: auto;
-	border-radius: 5px;
+	border-radius: var(--radius-full);
 	background: var(--panel);
 	color: var(--fg);
 
diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue
index d7aa874712..8cc6131dbe 100644
--- a/packages/frontend/src/ui/visitor.vue
+++ b/packages/frontend/src/ui/visitor.vue
@@ -276,7 +276,7 @@ defineExpose({
 				padding: 10px;
 				box-sizing: border-box;
 				text-align: center;
-				border-radius: 4px;
+				border-radius: var(--radius-ellipse);
 
 				&._button {
 					background: var(--panel);
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
index 4448763e7a..a4f75136ec 100644
--- a/packages/frontend/src/ui/zen.vue
+++ b/packages/frontend/src/ui/zen.vue
@@ -72,7 +72,7 @@ document.documentElement.style.overflowY = 'scroll';
 	width: 100%;
 	max-width: 60px;
 	margin: auto;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	background: var(--panel);
 	color: var(--fg);
 	right: var(--margin);
diff --git a/packages/frontend/src/widgets/WidgetAiscript.vue b/packages/frontend/src/widgets/WidgetAiscript.vue
index f3d8981b13..8fb4ebe0f2 100644
--- a/packages/frontend/src/widgets/WidgetAiscript.vue
+++ b/packages/frontend/src/widgets/WidgetAiscript.vue
@@ -157,7 +157,7 @@ defineExpose<WidgetComponentExpose>({
 		padding: 0 10px;
 		height: 28px;
 		outline: none;
-		border-radius: 4px;
+		border-radius: var(--radius-xs);
 
 		&:disabled {
 			opacity: 0.7;
diff --git a/packages/frontend/src/widgets/WidgetCalendar.vue b/packages/frontend/src/widgets/WidgetCalendar.vue
index ea2c54af6f..0ad166c6ba 100644
--- a/packages/frontend/src/widgets/WidgetCalendar.vue
+++ b/packages/frontend/src/widgets/WidgetCalendar.vue
@@ -208,7 +208,7 @@ defineExpose<WidgetComponentExpose>({
 	width: 100%;
 	overflow: hidden;
 	background: var(--X11);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 
 .meterVal {
diff --git a/packages/frontend/src/widgets/WidgetFederation.vue b/packages/frontend/src/widgets/WidgetFederation.vue
index 031d98a426..e6ee590c15 100644
--- a/packages/frontend/src/widgets/WidgetFederation.vue
+++ b/packages/frontend/src/widgets/WidgetFederation.vue
@@ -111,7 +111,7 @@ defineExpose<WidgetComponentExpose>({
 				width: ($bodyTitleHieght + $bodyInfoHieght);
 				height: ($bodyTitleHieght + $bodyInfoHieght);
 				object-fit: cover;
-				border-radius: 4px;
+				border-radius: var(--radius-xs);
 				margin-right: 8px;
 			}
 
diff --git a/packages/frontend/src/widgets/WidgetInstanceInfo.vue b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
index 0ad4189245..3fa811fa13 100644
--- a/packages/frontend/src/widgets/WidgetInstanceInfo.vue
+++ b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
@@ -66,7 +66,7 @@ defineExpose<WidgetComponentExpose>({
 	display: inline-block;
 	width: 60px;
 	height: 60px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	box-sizing: border-box;
 	border: solid 3px #fff;
 }
diff --git a/packages/frontend/src/widgets/WidgetMemo.vue b/packages/frontend/src/widgets/WidgetMemo.vue
index 1bfc7daf9e..c2d5ef566c 100644
--- a/packages/frontend/src/widgets/WidgetMemo.vue
+++ b/packages/frontend/src/widgets/WidgetMemo.vue
@@ -107,7 +107,7 @@ defineExpose<WidgetComponentExpose>({
 	padding: 0 10px;
 	height: 28px;
 	outline: none;
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 
 	&:disabled {
 		opacity: 0.7;
diff --git a/packages/frontend/src/widgets/WidgetPhotos.vue b/packages/frontend/src/widgets/WidgetPhotos.vue
index fd11bb3ccb..c07f2dd262 100644
--- a/packages/frontend/src/widgets/WidgetPhotos.vue
+++ b/packages/frontend/src/widgets/WidgetPhotos.vue
@@ -101,7 +101,7 @@ defineExpose<WidgetComponentExpose>({
 
 	.img {
 		border: solid 4px transparent;
-		border-radius: 5px;
+		border-radius: var(--radius-sm);
 	}
 }
 
@@ -120,7 +120,7 @@ defineExpose<WidgetComponentExpose>({
 		background-size: cover;
 		background-clip: content-box;
 		border: solid 2px transparent;
-		border-radius: 4px;
+		border-radius: var(--radius-xs);
 	}
 }
 </style>