---
title: "Border Radiusジェネレーター - border-radiusのCSSを作成"
description: CSSのborder-radiusを視覚的に調整できるツールです。各角の丸みをプレビューしながら設定でき、角丸デザインの作成やCSSコードの確認に活用できます。
canonical_url: "https://web-toolbox.dev/tools/border-radius-generator"
meta:
  author: K
  "og:description": CSSのborder-radiusを視覚的に調整できるツールです。各角の丸みをプレビューしながら設定でき、角丸デザインの作成やCSSコードの確認に活用できます。
  "og:image": "https://web-toolbox.dev/og/ja/tools/border-radius-generator-deee2dc3.png"
  "og:image:alt": "Border Radiusジェネレーター"
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "Border Radiusジェネレーター - border-radiusのCSSを作成"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **Border Radiusジェネレーター**

border-radiusを調整して角丸デザインを作成

**Border Radius Proが登場!**

プリセット選択やカスタムサイズ指定など、より柔軟な角丸デザインが可能に。

[Pro版へ](https://border-radius-pro.web-toolbox.dev/)

## **角丸の設定**

全て

px

左上

px

右上

px

右下

px

左下

px

## **プレビュー**

**アウトライン**

**CSSコード**

```
border-radius: 12px 12px 12px 12px;
```

## Border Radiusジェネレーターとは？

CSS の `**border-radius**` を視覚的に調整して、角丸の形とコードを確認できるツールです。シンプルな角丸から、非対称な複雑な形まで作れます。

プレビューを見ながら調整できるので、数値だけではイメージしづらい角丸をその場で確認できます。

## 使い方

1. シンプルまたはアドバンスドを選びます。
2. スライダーやプレビュー操作で形を調整します。
3. 必要ならアウトラインを表示します。
4. 生成された `**border-radius**` のCSSを確認します。

## 主な設定項目

### シンプル

四隅の角丸を個別に調整できます。「全て」を使うと、四隅をまとめて変更できます。

### アドバンスド

上辺、左辺、右辺、下辺をもとに、複雑な曲線形状を作れます。プレビュー上の4つの頂点を直接動かして調整することもできます。

### アウトライン

破線の外枠を表示して、形の輪郭を確認しやすくするオプションです。

## 入出力例

シンプルモードで四隅を `**12px 24px 36px 48px**` のように調整すると、次のCSSになります。

```css
border-radius: 12px 24px 36px 48px;
```

アドバンスドモードでは、次のような `**% / %**` 形式の出力になります。

```css
border-radius: 33% 67% 52% 48% / 52% 32% 68% 48%;
```

## 活用シーン

- ボタンやカードの角丸を調整したいとき
- 画像枠やバナーに柔らかい形を付けたいとき
- 非対称な装飾や有機的な形を作りたいとき
- CSSコードを確認しながらデザインを詰めたいとき

## 使うときの注意点

- シンプルとアドバンスドでは出力の形式が異なります
- 複雑な形ほど、レイアウトやサイズによって見え方が変わります
- プレビューで良く見えても、実際の要素サイズでは印象が変わることがあります

**使ってみてどうでしたか？**

最終更新: 2022年3月15日

### **関連ツール**

- [<h4>**Box Shadowジェネレーター**</h4>](https://web-toolbox.dev/tools/box-shadow-generator)
- [<h4>**CSS背景パターンジェネレーター**</h4>](https://web-toolbox.dev/tools/css-background-pattern-generator)
- [<h4>**CSSフィルタージェネレーター**</h4>](https://web-toolbox.dev/tools/css-filter-generator)
- [<h4>**CSSグラデーションジェネレーター**</h4>](https://web-toolbox.dev/tools/css-gradient-generator)
- [<h4>**グラデーションテキストジェネレーター**</h4>](https://web-toolbox.dev/tools/gradient-text-generator)
- [<h4>**Squircleジェネレーター**</h4>](https://web-toolbox.dev/tools/squircle-generator)
- [<h4>**CSSカーソルビューワー**</h4>](https://web-toolbox.dev/tools/css-cursor-viewer)
- [<h4>**SVG to CSS変換**</h4>](https://web-toolbox.dev/tools/svg-to-css)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/border-radius-generator#webpage","@type":"WebPage","description":"CSSのborder-radiusを視覚的に調整できるツールです。各角の丸みをプレビューしながら設定でき、角丸デザインの作成やCSSコードの確認に活用できます。","name":"Border Radiusジェネレーター - border-radiusのCSSを作成","url":"https://web-toolbox.dev/tools/border-radius-generator","breadcrumb":{"@id":"https://web-toolbox.dev/tools/border-radius-generator#breadcrumb"},"isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/border-radius-generator"]}]},{"@id":"https://web-toolbox.dev/tools/border-radius-generator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"CSSのborder-radiusを視覚的に調整できるツールです。各角の丸みをプレビューしながら設定でき、角丸デザインの作成やCSSコードの確認に活用できます。","name":"Border Radiusジェネレーター - border-radiusのCSSを作成","operatingSystem":"Windows, macOS, Linux, Android, iOS"},{"@id":"https://web-toolbox.dev/tools/border-radius-generator#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"ホーム","item":"https://web-toolbox.dev/","position":1},{"@type":"ListItem","name":"CSS","item":"https://web-toolbox.dev/categories/css","position":2},{"@type":"ListItem","name":"Border Radiusジェネレーター","item":"https://web-toolbox.dev/tools/border-radius-generator","position":3}]}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.