The CSS border-inline-end property is a shorthand property that sets the width, style, and color of an element's border at the end of the inline direction. In left-to-right writing modes, it typically corresponds to the right border.
- Sets the inline-end 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-end: width style color;Property values
- border-width: Specifies the width of the inline-end border.
- border-style: Specifies the style of the inline-end border, such as solid, dashed, or dotted.
- border-color: Specifies the color of the inline-end border.
Examples of border-inline-end Property
Here are some example discussed:
Example 1: The border-inline-end property applies a 6px solid yellow border to the inline-end edge (right border in left-to-right writing mode) of the purple box.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-inline-end 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;
}
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: 40px;
border-inline-end: 6px solid yellow;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS | border-inline-end Property</h2>
<div class="box">
A Computer Science Portal
</div>
</body>
</html>
<!--Driver Code Ends-->
Example 2: The border-inline-end property applies a 4px dashed yellow border to the inline-end edge (right border in left-to-right writing mode) of the purple box.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-inline-end 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;
}
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: 35px;
border-inline-end: 4px dashed yellow;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS | border-inline-end Property</h2>
<div class="box">
A Computer Science Portal
</div>
</body>
</html>
<!--Driver Code Ends-->