CSS - border-block-start Property
The border-block-start is a shorthand CSS property that sets the values of individual logical block-start border attributes in sinlge declaration.
Values for border-block-start-width, border-block-start-style, and border-block-start-color can be specified using the shorthand border-block-start property.
The writing-mode, direction, and text-orientation of the element determines how it maps to a particular physical border; these characteristics include border-top, border-right, border-bottom, and border-left.
It is connected to properties that determine the other borders of the element, such border-block-end, border-inline-start, and border-inline-end.
Possible values
The border-block-start can be specified with one or more of the following, in any order:
<'border-width'> - The width of the border.
<border-style'> - The line style of border.
<color> - The color of the border.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
border-block-start = <line-width> || <line-style> || <color>
Applies to
All the HTML elements.
CSS border-block-start - Basic Example
The following example demonstrates the usage of border-block-start property.
<html> <head> <style> header { background-color: #333; color: #fff; padding: 10px; text-align: center; } section { flex: 1; padding: 20px; background-color: #fff; margin: 10px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); } .right-section { display: flex; flex-direction: column; align-items: center; } .exampleText { border-block-start: 7px dashed blue; margin-top: 20px; padding: 10px; background-color: #ffcc00; font-weight: bold; } </style> </head> <body> <header> <h1>Example</h1> </header> <main> <section class="right-section"> <h2>Section</h2> <p>Example of border-block-start, it has blue border</p> <div class="exampleText">Example text</div> </section> </main> </body> </html>
CSS border-block-start - Writing Mode
The following example demonstrates the usage of border-block-start property with veritcal writing mode.
<html> <head> <style> header { background-color: #333; color: #fff; padding: 10px; text-align: center; } section { flex: 1; padding: 20px; background-color: #fff; margin: 10px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 1); } .right-section { display: flex; flex-direction: column; align-items: center; } .exampleText { writing-mode: vertical-rl; border-block-start: 0.6rem solid red; margin-top: 20px; padding: 10px; background-color: #ffcc00; font-weight: bold; } </style> </head> <body> <header> <h1>Example</h1> </header> <main> <section class="right-section"> <h2>Section</h2> <p>Example of border-block-start, it has red border. It has vertical text.</p> <div class="exampleText">Example text</div> </section> </main> </body> </html>
To Continue Learning Please Login
Login with Google