操作
各角の個別調整を有効化
CSS
border-radius: 40% 60% 70% 30% / 30% 30% 70% 70%;
デザインツール
Fancy Border Radius ジェネレーター
値をドラッグまたは直接入力して、8 点制御の不規則な CSS border-radius（fancy border radius）を可視化し、そのままコード生成できます。
CSSBorder radiusDesign
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
Border Radius ジェネレーター
利用シーン
- 有機的な形状のカードを作る
- 変形するボタンデザインを調整する
- 特徴的な UI 装飾を追加する
使い方
- 各コーナー radius を個別スライダーで動かす
- または 8 点の拡張コントロールに切り替える
- 生成された border-radius CSS をコピーする
入出力サンプル
FAQ
slash (/) は何を表しますか？
CSS の border-radius では / が水平半径と垂直半径を分け、不規則な楕円形状を作れるようにします。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
CSS Box Shadow ジェネレーター
CSS Box Shadow ジェネレーター - 視覚的コントロール付き
offset、blur、spread、color、opacity、inset を視覚的に調整し、カード、ボタン、オーバーレイ向けの box-shadow CSS をライブ生成できます。
CSS 影 box-shadow
Glassmorphism ジェネレーター
Glassmorphism ジェネレーター - backdrop-filter CSS
blur、opacity、background color、border opacity を視覚的に調整し、-webkit prefix 付きの frosted-glass CSS を生成できます。カード、ナビバー、モーダルのレイヤー表現に便利です。
CSS Glassmorphism backdrop-filter