Discover available options like none, solid, dashed, and more.
border-block-end-style
CSS Property
The border-block-end-style
CSS property defines the style of the logical block-end border of an element. This border style changes depending on the element’s writing mode, directionality, and text orientation. It corresponds to properties like border-top-style
, border-right-style
, border-bottom-style
, or border-left-style
based on the values of writing-mode
, direction
, and text-orientation
.
Description and Purpose
The border-block-end-style
property defines the style of the logical block-end border of an element. It allows precise control over the appearance of borders in various contexts, such as different writing modes, text orientations, and directions. This property is essential for creating visually appealing and responsive web designs.
Syntax and Values
The border-block-end-style
property allows you to specify the style of the logical block-end border of an element. Here is the syntax:
Values
- border-style: Defines the style of the border. Possible values include:
none
: No border.hidden
: Same asnone
, except in terms of border conflict resolution for border-collapsed tables.dotted
: A series of dots.dashed
: A series of short dashes.solid
: A single, solid line.double
: Two solid lines.groove
: Appears to be carved into the page.ridge
: Opposite ofgroove
. Appears to be coming out of the page.inset
: Appears to be embedded in the page.outset
: Opposite ofinset
. Appears to be coming out of the page.
- inherit: Inherits the border style from the parent element.
- initial: Sets the border style to its initial value (
none
). - revert: Resets the border style to the default defined by the browser.
- revert-layer: Resets the border style to the default defined by the browser, considering the cascade layers.
- unset: Resets the border style to its natural value, which means it behaves like
inherit
if the property is inherited, or likeinitial
if the property is not inherited.
Example Usage
Here is an example of how to use the border-block-end-style
property in CSS:
In this example, the border-block-end-style
property sets the style of the block-end border to dashed
. This will apply a dashed border to the logical end of the block, which could be the bottom, right, or another side depending on the writing mode and text orientation.
Related Properties
The border-block-end-style
property is part of a broader set of CSS properties that control the appearance of borders on HTML elements. These related properties provide comprehensive control over various border styles and positions, making it easier to create visually appealing and responsive web designs. Here are some of the key related properties:
border-block-start-style
: Defines the style of the logical block-start border of an element.border-inline-start-style
: Specifies the style of the logical inline-start border of an element.border-inline-end-style
: Defines the style of the logical inline-end border of an element.border-top-style
: Sets the style of the top border of an element.border-right-style
: Sets the style of the right border of an element.border-bottom-style
: Sets the style of the bottom border of an element.border-left-style
: Sets the style of the left border of an element.
Formal Definition
The border-block-end-style
property defines the style of the logical block-end border of an element. Here are the key characteristics:
Property | Value |
---|---|
Initial Value | none |
Applies to | All elements |
Inherited | No |
Computed Value | As specified |
Animation Type | Discrete |
Formal Syntax
The formal syntax for the border-block-end-style
property is as follows:
Explanation of Values
- none: No border is applied.
- hidden: Same as
none
, except in terms of border conflict resolution for border-collapsed tables. - dotted: A series of dots.
- dashed: A series of short dashes.
- solid: A single, solid line.
- double: Two solid lines.
- groove: Appears to be carved into the page.
- ridge: Opposite of
groove
. Appears to be coming out of the page. - inset: Appears to be embedded in the page.
- outset: Opposite of
inset
. Appears to be coming out of the page.
Example Usage
Here are some examples illustrating how to use the border-block-end-style
property in CSS:
Example 1: Dashed Border with Vertical Text
HTML
CSS
Example 2: Dotted Border on a Div
HTML
CSS
Example 3: Double Border on a Block Element
HTML
CSS
Example 4: Groove Border on a Paragraph
HTML
CSS
Summary
The border-block-end-style
property is an essential tool in CSS for defining the style of the logical block-end border of an element. By following the formal syntax and understanding the various values, developers can achieve precise and consistent styling of borders in their web designs. This property is widely supported and compatible with many devices and browser versions, making it a reliable choice for enhancing the visual appearance of web elements.
For more information on the border-block-end-style
property, including detailed examples and compatibility, refer to the full documentation.
Specifications
The border-block-end-style
property is defined in the CSS Logical Properties and Values Level 1 specification.
Browser Compatibility
The border-block-end-style
property is widely supported across many devices and browsers. It has been available since September 2021.
For more information on compatibility, refer to detailed documentation and full compatibility tables.
Related Resources
- CSS Logical Properties and Values
- Physical Border Properties
- Writing Mode, Direction, and Text Orientation
These resources provide additional context and information on how to use the border-block-end-style
property effectively in your web designs.
See Also
For more information on related topics and properties, check out these resources:
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.