Bootstrap 5 Border-radius
Last Updated :
05 Apr, 2024
Bootstrap 5 Border-radius offers consistent and responsive control over element roundness. With predefined classes, it allows easy customization, providing sleek and modern designs. From sharp corners to smooth curves, it enhances visual appeal effortlessly
Border-radius is used to set the radius of the border on an element. The border-radius classes easily add the rounded corners
Border-radius used Classes:
| Class Name | Description |
|---|
| rounded | Makes all corners rounded of an element. |
| rounded-top | Makes the top corners rounded of an element. |
| rounded-end | Makes the right-side corners rounded. |
| rounded-bottom | Makes the bottom corners rounded of an element. |
| rounded-start | Makes the left-side corners rounded. |
| rounded-circle | Makes the element appear as a circle. |
| rounded-pill | Makes the element appear as a pill shape. |
Syntax:
<div class="rounded">
Content
</div>Example of Bootstrap 5 Border-radius
Example 1: In this example, will add all border radius classes on image elements to see their effects.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Border-radius</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
<style>
img {
width: 100px;
height: 100px;
}
.gfg {
width: 200px;
}
</style>
</head>
<body>
<div class="container" style="text-align: center;">
<h3>Bootstrap 5 Border-radius</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="rounded"
alt="GFG Logo">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="rounded-top"
alt="GFG Logo">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="rounded-end"
alt="GFG Logo">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="rounded-bottom"
alt="GFG Logo">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="rounded-start"
alt="GFG Logo">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="rounded-circle"
alt="GFG Logo">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="gfg rounded-pill"
alt="GFG Logo">
</div>
</body>
</html>
Output:
Bootstrap 5 Border-radius Example Output
Example 2: In this example, will add all border radius classes on div elements to see their effects.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Border-radius</title>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
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: #e9e9e9;
}
.gfg {
width: 200px;
}
</style>
</head>
<body>
<div
class="container"
style="text-align: center"
>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>Bootstrap 5 Border-radius</h3>
<div class="box">
<span
class="border
border-primary"
></span>
<span
class="border rounded
border-secondary"
></span>
<span
class="border rounded-top
border-success"
></span>
<span
class="border rounded-end
border-danger"
></span>
<span
class="border rounded-bottom
border-warning"
></span>
<span
class="border rounded-start
border-info"
></span>
<span
class="border rounded-circle
border-light"
></span>
<span
class="gfg border rounded-pill
border-dark"
></span>
</div>
</div>
</body>
</html>
Output:
Bootstrap Boder Radius Example Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...