Primer CSS Rounded Corners Border
Last Updated :
19 Apr, 2022
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.
In this article, we will learn about Primer CSS Rounded Corners Border. Rounded corners borders are used to provide the CSS border-radius to the border creating rounded borders. This can also be used to make circular borders.
Syntax:
<div class="border rounded-*">
....
</div>
Note: * can be substituted with any number from 0 to 3 based upon the border-radius requirement.
Classes:
- rounded-0: This class is used to set the border-radius to 0 which basically removes any rounded corners.
- rounded-1: This class is used to set the border-radius of 4px.
- rounded-2: This class is used to set the border-radius of 6px.
- rounded-3: This class is used to set the border-radius of 8px.
- circle: This class is used to set the border-radius of 50%, which makes circular borders.
We can also use these classes to specifically create corners of any edge rounded.
- rounded-*-0
- rounded-*-1
- rounded-*-2
- rounded-*-3
Note: The * can be substituted with values like the top, right, bottom, and left
Example 1: In this example, we will learn about the rounded-0, rounded-1, rounded-2, rounded-3, and circle classes. For your better understanding, we are using the CSS border-colors so that changes can be more seen clearly.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
</head>
<body style="padding:1%;width:50%">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3> Rounded Corners Border</h3>
<h2>rounded-0</h2>
<div class="border rounded-0"
style="border-color:violet !important;">
GeeksforGeeks is a computer science portal.
</div>
<br>
<h2>rounded-1</h2>
<div class="border rounded-1"
style="border-color:red !important;">
GeeksforGeeks is a computer science portal.
</div>
<br>
<h2>rounded-2</h2>
<div class="border rounded-2"
style="border-color:green !important;">
GeeksforGeeks is a computer science portal.
</div>
<br>
<h2>rounded-3</h2>
<div class="border rounded-3"
style="border-color: blue !important;">
GeeksforGeeks is a computer science portal.
</div>
<br>
<h2>Circle</h2>
<div class="border circle" style=
"width:100px; height:100px;background-color:green;">
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will learn about creating rounded corners or particular edges using rounded-right-0, rounded-right-1, rounded-right-2 , and rounded-right-3 classes.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
</head>
<body style="padding:1%;width:50%">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3> Rounded Corners Border</h3>
<h2>rounded-right-0</h2>
<div class="border rounded-right-0"
style="border-color:violet !important;">
GeeksforGeeks is a computer science portal.
</div>
<br>
<h2>rounded-right-1</h2>
<div class="border rounded-right-1"
style="border-color:red !important;">
GeeksforGeeks is a computer science portal.
</div>
<br>
<h2>rounded-right-2</h2>
<div class="border rounded-right-2"
style="border-color:green !important;">
GeeksforGeeks is a computer science portal.
</div>
<br>
<h2>rounded-right-3</h2>
<div class="border rounded-right-3"
style="border-color: blue !important;">
GeeksforGeeks is a computer science portal.
</div>
</body>
</html>
|
Output:
Note: You can notice only the corners of the right edge are rounded.
Reference: https://primer.style/css/utilities/borders#rounded-corners
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...