diff --git a/packages/zenn-content-css/src/_content.scss b/packages/zenn-content-css/src/_content.scss
index f0a7b008..4bf92bf6 100644
--- a/packages/zenn-content-css/src/_content.scss
+++ b/packages/zenn-content-css/src/_content.scss
@@ -183,7 +183,7 @@ code {
   padding: 0.2em 0.4em;
   background: rgba(33, 90, 160, 0.07); // $c-contrast と同じ色
   font-size: 0.85em;
-  border-radius: 4px;
+  border-radius: $rounded-xs;
   vertical-align: 0.08em;
 }
 code,
@@ -197,7 +197,7 @@ pre {
   background: $c-contrast;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
-  border-radius: 0.7em;
+  border-radius: $rounded-xs;
   word-break: normal; // iOSで折り返されるのを防ぐ
   word-wrap: normal; // iOSで折り返されるのを防ぐ
   /* flex + codeの隣に疑似要素を配置することで横スクロール時の右端の余白を作る */
@@ -238,7 +238,7 @@ pre {
   color: rgba(255, 255, 255, 0.9);
   font-size: 12px;
   line-height: 1.3;
-  border-radius: 6px 6px 0 0;
+  border-radius: $rounded-xs $rounded-xs 0 0;
   // コードブロックのファイル名が右端まで達したときに見た目が微妙になるのを防ぐために
   // 下側のスペースを大きめに取りネガティブマージンで表示を調整（広めに取ったpaddingぶんだけmarginを下げる）
   // ref: https://github.com/zenn-dev/zenn-editor/issues/236
@@ -284,7 +284,7 @@ summary {
   border: solid 1px $c-border-gray;
   color: var(--c-contrast);
   font-size: 0.9em;
-  border-radius: 9px;
+  border-radius: $rounded-lg;
   background: #fff;
 
   &::-webkit-details-marker {
@@ -292,7 +292,7 @@ summary {
   }
 }
 details[open] summary {
-  border-radius: 5px 5px 0 0;
+  border-radius: $rounded-lg $rounded-lg 0 0;
   box-shadow: none;
   background: $c-bg-gray-lighter;
   border-bottom: none;
@@ -300,7 +300,7 @@ details[open] summary {
 .details-content {
   padding: 0.5em 0.9em;
   border: solid 1px $c-border-gray;
-  border-radius: 0 0 5px 5px;
+  border-radius: 0 0 $rounded-lg $rounded-lg;
   background: #fff;
 
   & > * {
diff --git a/packages/zenn-content-css/src/_message.scss b/packages/zenn-content-css/src/_message.scss
index b315b293..997b0367 100644
--- a/packages/zenn-content-css/src/_message.scss
+++ b/packages/zenn-content-css/src/_message.scss
@@ -4,7 +4,7 @@ aside.msg {
   align-items: flex-start;
   margin: 1.5rem 0;
   padding: 1.4em 1em;
-  border-radius: 10px;
+  border-radius: $rounded-xs;
   background: $c-bg-warning;
   color: rgba(0, 0, 0, 0.7);
   font-size: 0.94em;
diff --git a/packages/zenn-content-css/src/index.scss b/packages/zenn-content-css/src/index.scss
index b8f89b2a..8a1c7bdf 100644
--- a/packages/zenn-content-css/src/index.scss
+++ b/packages/zenn-content-css/src/index.scss
@@ -31,6 +31,15 @@ $c-text-gray-darker: $c-gray-800;
 $c-text-link-primary: $c-blue-600;
 $c-contrast: #1a2638; // 主にCodeBlockの背景色に使う
 
+/* border-radius */
+$rounded-xs: 4px;
+$rounded-sm: 7px;
+$rounded-md: 10px;
+$rounded-lg: 14px;
+$rounded-xl: 20px;
+$rounded-full: 99rem;
+$rounded-publication: 25%;
+
 $xs: 374px;
 $sm: 576px;
 $md: 768px;