How to Add Border on Only One Side in Shorter Way in CSS ?
Last Updated :
06 Jun, 2023
The border is one of the most important styling properties in CSS and it is very crucial to add in most of the layout to feature stark distinctions. But not always required we need to add borders to all sides and maybe to only one side.
In this article, we are going to see the shortest way to do that in traditional CSS, Bootstrap 5, and Tailwind CSS. In Traditional CSS, only the border-{any side} property is enough, and in both Tailwind and Bootstrap 5, we need to use some classes of their own.
Syntax:
// With traditional CSS: CSS ruleset
border-{any side}: values;
// With Bootstrap 5: class used in markup
class="border-{top/end/bottom/start}"
// With Tailwind CSS: class used in markup
class="border-{t/r/b/l}">...</div>
Property used for the one-sided border:
- border-{any side}: This property adds the border to a single side that is specified. The “{any side}” part is replaced by the top, right, bottom, and left.
- border-{top/end/bottom/start}: This is a Bootstrap 5 class that is used to add the border at any side i.e., top, right, bottom, and start.
- border-{t/r/b/l}: This is a Tailwind CSS class that is used to add the border at any side i.e., top, right, bottom, and start.
Example 1: The code demonstrates how we can add a border to only one side using Traditional CSS and the border-{any side} property:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Is there a shorter way to write a border
on only one side
</title>
<style>
.container {
display: flex;
}
.container-1 {
border-left: 0.25rem solid green;
background-color: gainsboro;
width: 250px;
height: 100px;
margin: 5% 6% 0 10%;
}
.container-2 {
border-bottom: 0.25rem solid green;
background: gainsboro;
margin-top: 5%;
width: 250px;
height: 100px;
}
.container-3 {
border-right: 0.25rem solid green;
background-color: gainsboro;
width: 250px;
height: 100px;
margin: 5% 6% 0 10%;
}
.container-4 {
border-top: 0.25rem solid green;
background: gainsboro;
width: 250px;
height: 100px;
margin-top: 5%;
}
p {
margin-left: 18%;
}
</style>
</head>
<body>
<h1 style="color: green; margin: 1rem">
GeeksforGeeks
</h1>
<h3 style="margin: 1rem; margin-top: -1rem">
Is there a shorter way to write a border
on only one side?
</h3>
<div class="container">
<div class="container-1"></div>
<div class="container-2"></div>
</div>
<div class="container">
<p>with <code>only left border</code></p>
<p>with <code>only bottom border</code></p>
</div>
<div class="container">
<div class="container-3"></div>
<div class="container-4"></div>
</div>
<div class="container">
<p>with <code>only right border</code></p>
<p>with <code>only top border</code></p>
</div>
</body>
</html>
|
Output:
Example 2: The code demonstrates how we can add a border to only one side using Bootstrap and Tailwind using respective classes:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<h1 class="text-success mt-4 ms-4">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Is there a shorter way to write a border on
only one side?
</h4>
<p class="text-center fs-4 font-monospace">
With Bootstrap:
</p>
<div class="container d-flex">
<div class="w-50 h-50 bg-light border-start
border-success p-5 m-1">
with only left border
</div>
<div class="w-50 h-25 bg-light border-bottom
border-success p-5 m-1">
with only bottom border
</div>
</div>
<p class="text-center text-xl font-mono">
With Tailwind CSS:
</p>
<div class="container flex">
<div class="w-6/12 m-1 p-5 border-r-4
border-green-500 bg-gray-200">
with only right border
</div>
<div class="w-6/12 m-1 p-5 border-t-4
border-green-500 bg-gray-200">
with only top border
</div>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...