From ea5e0fe465838cd043eb7f6edf8ff56e0aa7c9f1 Mon Sep 17 00:00:00 2001 From: Subhashree A <160337860+SubhashreeA1@users.noreply.github.com> Date: Mon, 23 Feb 2026 20:20:49 +0530 Subject: [PATCH 1/2] Create documentation for 'border-inline' property Add documentation for the 'border-inline' CSS property, including syntax and examples. --- .../terms/border-inline/border-inline.md | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 content/css/concepts/background/terms/border-inline/border-inline.md diff --git a/content/css/concepts/background/terms/border-inline/border-inline.md b/content/css/concepts/background/terms/border-inline/border-inline.md new file mode 100644 index 00000000000..211cdf96bdf --- /dev/null +++ b/content/css/concepts/background/terms/border-inline/border-inline.md @@ -0,0 +1,58 @@ +--- +Title: 'border-inline' +Description: 'Shorthand property that defines the width, color, and style of the inline start and inline end borders of an element.' +Subjects: + - 'Web Development' + - 'Web Design' +Tags: + - 'Borders' + - 'Box Model' + - 'Colors' +CatalogContent: + - 'learn-css' + - 'paths/front-end-engineer-career-path' + - 'paths/full-stack-engineer-career-path' +--- + +Shorthand property that defines the width, color, and style of the inline start and inline end borders of an element. + +The affected sides depend on the writing mode and text direction. + +## Syntax + +```css +border-inline: ; +``` + +By default, `border-inline` will have a style of `none` and a width of `medium`. +The default color is the value of the `color` property. + +`` can be one of the following: + +- `border-style` defines the appearance of the border. +- `border-width` defines the thickness of the border. +- `border-color` defines the color of the border. + +> **Note:** Values can be provided in any order. + +## Example + +Set the inline borders of the `p` element to be blue, 2 pixels thick, and solid: + +```css +p { + border-inline: 2px solid blue; +} +``` + +## Example + +Set the inline borders of the `div` element to be red, 5 pixels thick, and dashed: + +```css +div { + border-inline: dashed 5px red; +} +``` + +In a left-to-right writing mode, this applies borders to the left and right sides of the element. In a right-to-left writing mode, the inline start and end sides adjust automatically. From 809087228a8df000ab95066718f7a683733dc9da Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Tue, 24 Feb 2026 12:44:53 +0530 Subject: [PATCH 2/2] Revise border-inline documentation for clarity Updated the description and examples for the border-inline property to clarify its usage and parameters. --- .../terms/border-inline/border-inline.md | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/content/css/concepts/background/terms/border-inline/border-inline.md b/content/css/concepts/background/terms/border-inline/border-inline.md index 211cdf96bdf..ee5d93e8b76 100644 --- a/content/css/concepts/background/terms/border-inline/border-inline.md +++ b/content/css/concepts/background/terms/border-inline/border-inline.md @@ -1,9 +1,9 @@ --- Title: 'border-inline' -Description: 'Shorthand property that defines the width, color, and style of the inline start and inline end borders of an element.' +Description: 'Sets the width, style, and color of an element’s inline-start and inline-end borders.' Subjects: - - 'Web Development' - 'Web Design' + - 'Web Development' Tags: - 'Borders' - 'Box Model' @@ -11,33 +11,33 @@ Tags: CatalogContent: - 'learn-css' - 'paths/front-end-engineer-career-path' - - 'paths/full-stack-engineer-career-path' --- -Shorthand property that defines the width, color, and style of the inline start and inline end borders of an element. - -The affected sides depend on the writing mode and text direction. +The **`border-inline`** property is a shorthand property that sets the width, style, and color of an element’s inline-start and inline-end borders. The physical sides affected depend on the writing mode and text direction. ## Syntax -```css +```pseudo border-inline: ; ``` -By default, `border-inline` will have a style of `none` and a width of `medium`. -The default color is the value of the `color` property. +**Parameters:** + +- ``: May include one or more of the following, in any order: + - ``: Sets the border thickness (e.g., `1px`, `thin`, `medium`, `thick`). + - ``: Sets the border style (e.g., `solid`, `dashed`, `dotted`, `double`, `none`). + - ``: Sets the border color (e.g., `red`, `#333`, `rgb(0 0 0)`). + - **Global values:** `inherit`, `initial`, `revert`, `revert-layer`, `unset`. -`` can be one of the following: +If a single value is provided, it applies to both inline-start and inline-end borders. -- `border-style` defines the appearance of the border. -- `border-width` defines the thickness of the border. -- `border-color` defines the color of the border. +**Return value:** -> **Note:** Values can be provided in any order. +None. Sets the computed values of `border-inline-start` and `border-inline-end`. -## Example +## Example 1 -Set the inline borders of the `p` element to be blue, 2 pixels thick, and solid: +The following example sets the inline borders of the `p` element to be blue, 2 pixels thick, and solid: ```css p { @@ -45,9 +45,9 @@ p { } ``` -## Example +## Example 2 -Set the inline borders of the `div` element to be red, 5 pixels thick, and dashed: +The following example set the inline borders of the `div` element to be red, 5 pixels thick, and dashed: ```css div {