Bootstrap 5 Borders Sizes
Last Updated :
07 Nov, 2022
Bootstrap 5 Border utility is used to set the style of the border element. The border styles can be of border-color, border-width, border-radius, etc.
The Border Sizes are used to set the border-radius rounded corners larger or smaller. The range of border sizes varies from 0 to 3, where 0 represents smaller-size rounded corners and 3 represents larger-size rounded corners.
Borders Sizes used Classes:
- .rounded-0
- .rounded-1
- .rounded-2
- .rounded-3
Syntax:
<div class="rounded-*">
Content
</div>
Example 1: In this example, we will add different border sizes on the div elements.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bootstrap 5 Borders Sizes</ title >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
< style >
/* CSS style for Boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 6px;
background-color: #DCDCDC;
}
</ style >
</ head >
< body >
< div class = "container" style = "text-align: center;" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 >Bootstrap 5 Borders Sizes</ h3 >
< div class = "box" >
< span class = "border rounded-0" ></ span >
< span class = "border rounded-1" ></ span >
< span class = "border rounded-2" ></ span >
< span class = "border rounded-3" ></ span >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we will add different border sizes on the image elements.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bootstrap 5 Borders Sizes</ title >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
< style >
img {
width: 100px;
height: 100px;
}
</ style >
</ head >
< body >
< div class = "container" style = "text-align: center;" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 >Bootstrap 5 Borders Sizes</ h3 >
class = "rounded-0" alt = "GFG Logo" >
class = "rounded-1" alt = "GFG Logo" >
class = "rounded-2" alt = "GFG Logo" >
class = "rounded-3" alt = "GFG Logo" >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/utilities/borders/#sizes
Share your thoughts in the comments
Please Login to comment...