![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-block-start-style Property
![CSS border-block-start-style Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-block-start-style.webp)
Photo Credit to CodeToFun
🙋 Introduction
The border-block-start-style
property in CSS is part of the Logical Properties and Values specification, which allows developers to control the style of the border on the block-start side of an element. The block-start side corresponds to the top border in left-to-right writing modes (like English) and may vary in different writing modes (e.g., right-to-left, vertical).
This property is useful when designing layouts that need to adapt to different writing directions.
💡 Syntax
The syntax for the border-block-start-style
property is similar to other border style properties. You can specify the border style using any valid border style keyword.
element {
border-block-start-style: style;
}
🎛️ Default Value
The default value of the border-block-start-style
property is none, meaning no border is displayed by default.
🏠 Property Values
Value | Description |
---|---|
none | No border is displayed. |
solid | A single solid line. |
dotted | A series of dots. |
dashed | A series of short dashes. |
double | Two parallel lines with some space between them. |
groove | A carved effect that makes the border appear inset. |
ridge | A raised effect that makes the border appear outset. |
inset | A border that makes the element appear embedded. |
outset | A border that makes the element appear elevated. |
📄 Example
In this example, we'll apply a solid border to the block-start side of a paragraph.
<!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-style Example</title>
<style>
p {
border-block-start-style: solid;
border-block-start-width: 3px;
border-block-start-color: #3498db;
}
</style>
</head>
<body>
<h1>Paragraph with Custom Block-Start Border Style</h1>
<p>This paragraph has a solid border on the block-start side.</p>
</body>
</html>
🖥️ Browser Compatibility
The border-block-start-style
property is supported in most modern browsers. This includes the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it's important to test your website across different browsers and writing modes to ensure consistent rendering.
🎉 Conclusion
The border-block-start-style
property is a versatile tool for web developers, especially when creating layouts that need to adapt to different writing directions. By controlling the style of the block-start border, you can add subtle design touches that enhance the overall look and feel of your web pages. Experiment with different styles to see how this property can be used in your projects.
👨💻 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-style Property), please comment here. I will help you immediately.