|
1 | 1 | --- |
2 | 2 | Title: 'border-inline' |
3 | | -Description: 'Shorthand property that defines the width, color, and style of the inline start and inline end borders of an element.' |
| 3 | +Description: 'Sets the width, style, and color of an element’s inline-start and inline-end borders.' |
4 | 4 | Subjects: |
5 | | - - 'Web Development' |
6 | 5 | - 'Web Design' |
| 6 | + - 'Web Development' |
7 | 7 | Tags: |
8 | 8 | - 'Borders' |
9 | 9 | - 'Box Model' |
10 | 10 | - 'Colors' |
11 | 11 | CatalogContent: |
12 | 12 | - 'learn-css' |
13 | 13 | - 'paths/front-end-engineer-career-path' |
14 | | - - 'paths/full-stack-engineer-career-path' |
15 | 14 | --- |
16 | 15 |
|
17 | | -Shorthand property that defines the width, color, and style of the inline start and inline end borders of an element. |
18 | | - |
19 | | -The affected sides depend on the writing mode and text direction. |
| 16 | +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. |
20 | 17 |
|
21 | 18 | ## Syntax |
22 | 19 |
|
23 | | -```css |
| 20 | +```pseudo |
24 | 21 | border-inline: <value>; |
25 | 22 | ``` |
26 | 23 |
|
27 | | -By default, `border-inline` will have a style of `none` and a width of `medium`. |
28 | | -The default color is the value of the `color` property. |
| 24 | +**Parameters:** |
| 25 | + |
| 26 | +- `<value>`: May include one or more of the following, in any order: |
| 27 | + - `<line-width>`: Sets the border thickness (e.g., `1px`, `thin`, `medium`, `thick`). |
| 28 | + - `<line-style>`: Sets the border style (e.g., `solid`, `dashed`, `dotted`, `double`, `none`). |
| 29 | + - `<color>`: Sets the border color (e.g., `red`, `#333`, `rgb(0 0 0)`). |
| 30 | + - **Global values:** `inherit`, `initial`, `revert`, `revert-layer`, `unset`. |
29 | 31 |
|
30 | | -`<value>` can be one of the following: |
| 32 | +If a single value is provided, it applies to both inline-start and inline-end borders. |
31 | 33 |
|
32 | | -- `border-style` defines the appearance of the border. |
33 | | -- `border-width` defines the thickness of the border. |
34 | | -- `border-color` defines the color of the border. |
| 34 | +**Return value:** |
35 | 35 |
|
36 | | -> **Note:** Values can be provided in any order. |
| 36 | +None. Sets the computed values of `border-inline-start` and `border-inline-end`. |
37 | 37 |
|
38 | | -## Example |
| 38 | +## Example 1 |
39 | 39 |
|
40 | | -Set the inline borders of the `p` element to be blue, 2 pixels thick, and solid: |
| 40 | +The following example sets the inline borders of the `p` element to be blue, 2 pixels thick, and solid: |
41 | 41 |
|
42 | 42 | ```css |
43 | 43 | p { |
44 | 44 | border-inline: 2px solid blue; |
45 | 45 | } |
46 | 46 | ``` |
47 | 47 |
|
48 | | -## Example |
| 48 | +## Example 2 |
49 | 49 |
|
50 | | -Set the inline borders of the `div` element to be red, 5 pixels thick, and dashed: |
| 50 | +The following example set the inline borders of the `div` element to be red, 5 pixels thick, and dashed: |
51 | 51 |
|
52 | 52 | ```css |
53 | 53 | div { |
|
0 commit comments