The CSS border-inline-start property is a shorthand property that sets the width, style, and color of an element's border at the start of the inline direction. In left-to-right writing modes, it typically corresponds to the left border.
- Sets the inline-start border's width, style, and color in a single declaration.
- Adapts automatically to different writing modes and text directions.
- Simplifies border styling by combining multiple border properties into one.
Syntax:
border-inline-start: width style color;Property values
- border-width: Specifies the width of the inline-start border.
- border-style: Specifies the style of the inline-start border, such as solid, dashed, or dotted.
- border-color: Specifies the color of the inline-start border.
Examples of border-inline-start Property
Below examples illustrate the border-inline-start property in the CSS:
Example 1: The border-inline-start property applies a 6px solid yellow border to the inline-start edge (left border in left-to-right writing mode) of the purple box.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-inline-start Property</title>
<!--Driver Code Ends-->
<style>
body {
background-color: #dcdcdc;
font-family: "Times New Roman", serif;
}
h1 {
color: green;
font-size: 34px;
margin: 10px 0;
text-align: left;
}
h2 {
font-size: 20px;
margin-bottom: 25px;
}
.box {
width: 220px;
background-color: purple;
color: black;
text-align: center;
font-size: 18px;
padding: 8px 0;
margin-left: 45px;
border-inline-start: 6px solid yellow;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS | border-inline-start Property</h2>
<div class="box">
A Computer Science Portal
</div>
</body>
</html>
<!--Driver Code Ends-->
Example 2: The border-inline-start property applies a 4px dashed yellow border to the inline-start edge (left border in left-to-right writing mode) of the purple box.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-inline-start Property</title>
<!--Driver Code Ends-->
<style>
body {
background-color: #dcdcdc;
font-family: "Times New Roman", serif;
}
h1 {
color: green;
font-size: 34px;
margin: 10px 0;
text-align: left;
}
h2 {
font-size: 20px;
margin-bottom: 25px;
}
.box {
width: 220px;
background-color: purple;
color: black;
text-align: center;
font-size: 18px;
padding: 8px 0;
margin-left: 45px;
border-inline-start: 4px dashed yellow;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS | border-inline-start Property</h2>
<div class="box">
A Computer Science Portal
</div>
</body>
</html>
<!--Driver Code Ends-->