![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-block-start Property
![CSS border-block-start Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-block-start-color.webp)
Photo Credit to CodeToFun
🙋 Introduction
The border-block-start
property in CSS is used to set the style, width, and color of the border on the start side of an element's block axis. In languages such as English, where text flows from left to right and top to bottom, the block-start edge corresponds to the top edge of an element.
This property is particularly useful when designing for different writing modes, ensuring that the border adapts to the flow of content in various languages.
💡 Syntax
The border-block-start
property can be set using one or more of the following values:
element {
border-block-start: || || ;
}
Each of these values is optional, but at least one must be provided.
🎛️ Default Value
The default value of the border-block-start
property is:
border-block-start: medium none currentcolor;
- medium: The default width of the border.
- none: No border style is applied.
- currentcolor: Uses the current text color for the border color.
🏠 Property Values
Value | Description |
---|---|
<border-width> | Specifies the width of the border (e.g., thin, medium, thick, or any valid length value). |
<border-style> | Defines the style of the border (e.g., solid, dashed, dotted, double, none). |
<border-color> | Sets the color of the border (e.g., named colors, hex values, RGB, HSL). |
📄 Example
In this example, we'll apply a solid blue border to the block-start side of a paragraph element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS border-block-start Example</title>
<style>
p {
border-block-start: 5px solid blue;
}
</style>
</head>
<body>
<h1>Paragraph with Custom Border-Block-Start</h1>
<p>
This paragraph has a solid blue border on the block-start side. In English, this is the top edge of the paragraph.
</p>
</body>
</html>
🖥️ Browser Compatibility
The border-block-start
property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is always recommended to test your design across various browsers to ensure full compatibility, especially if your website is designed for multiple writing modes.
🎉 Conclusion
The border-block-start
property is an excellent tool for adding a border to the start of an element's block in a way that respects the writing mode of the document. This allows for more flexible and language-sensitive designs.
By using this property, you can control the appearance of your website's elements more precisely and ensure a consistent visual experience across different languages and writing directions.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS border-block-start Property) , please comment here. I will help you immediately.