HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色
Colors RGB HEX HSL
CSSの背景
Background Color Background Image Background Repeat Background Attachment Background Shorthand
CSSボーダー
ボーダーズ 境界線の幅 ボーダの色 ボーダーサイド ボーダー速記 丸みを帯びた境界線
CSSマージン
Margins Margin Collapse
CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSSテキスト
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSSフォント
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSSアイコン CSSリンク CSSリスト CSSテーブル
Table Borders Table Size Table Alignment Table Style Table Responsive
CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート
Float Clear Float Examples
CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー
Navbar Vertical Navbar Horizontal Navbar
CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS！重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション
Linear Gradients Radial Gradients Conic Gradients
CSSシャドウ
Shadow Effects Box Shadow
CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの例

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

CSSの丸みを帯びた境界線

❮ 前 次 ❯

CSSの丸みを帯びた境界線

このborder-radiusプロパティは、要素に丸みを帯びた境界線を追加するために使用されます。

通常の境界線

丸いボーダー

丸いボーダー

最も丸い境界線

例

p {
  border: 2px solid red;
  border-radius: 5px;
}

その他の例


この例は、1つの宣言の上部境界線のすべてのプロパティを設定するための省略形のプロパティを示しています。


設定するこの例は、下の境界線のスタイルを設定する方法を示しています。


設定するこの例は、左の境界線の幅を設定する方法を示しています。


を設定するこの例は、4つの境界線の色を設定する方法を示しています。それは1から4色を持つことができます。


設定するこの例は、右の境界線の色を設定する方法を示しています。

エクササイズで自分をテストする

エクササイズ：

<p>要素に「4px」、「dotted」、「red」の境界線を設定するには、bordershorthandプロパティを使用します。

<style>
p {
  : ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

すべてのCSS境界プロパティ

Property Description
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius Sets all the four border-*-radius properties for rounded corners
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders

❮ 前 次 ❯