Start Here
Core Concepts
UI Effects
Animations
Box Shadows
Text Shadow
UI Widgets
Color Shade
Gradient
Text Gradient
Background Gradient
Border Gradient
Other Pages
Nav First Level
Nav Second Level
Nav Third Level
N
A
V
A
V
Border Radius
Definition and Usage
The BrRs series provides predefined fully rounded shapes, making it easy to create circular or pill-shaped elements. This utility is particularly useful for avatars, buttons, and other UI elements requiring smooth, rounded edges.
Border Radius Example
The BrRs property can work with both Rem as well percentage.
| Property | Value |
|---|---|
| BrRs1 | border-radius: 0.0625rem; |
| BrRs16 | border-radius: 1rem; |
| BrRs50 | border-radius: 3.125rem; |
Note
The Range of this BrRs property is form 0 to 50.
| Property | Value |
|---|---|
| BrRs1p | border-radius: 1%; |
| BrRs16p | border-radius: 16%; |
| BrRs50p | border-radius: 50%; |
Note
The Range of this BrRs property is form 0p to 50p.
Border Radius for individual sides
The BrRs series provides predefined border-radius values that can be applied to all corners or individual sides. This utility ensures consistent and scalable rounded corners across your project.
| Property | Value |
|---|---|
| BrTpRtRs1 | border-top-right-radius: 0.0625rem; |
| BrTpLtRs1 | border-top-left-radius: 0.0625rem; |
| BrBmLtRs1 | border-bottom-left-radius: 0.0625rem; |
| BrBmRtRs1 | border-bottom-right-radius: 1%; |
Note
The range of this property is from 0 to 50.
| Property | Value |
|---|---|
| BrBmRtRs1p | border-bottom-right-radius: 0.0625rem; |
| BrTpRtRs1p | border-top-right-radius: 1%; |
| BrTpLtRs1p | border-top-left-radius: 1%; |
| BrBmLtRs1p | border-bottom-left-radius: 1%; |
Web Tool
Celebrate Tech © 2008 - 2024
Welcome Amit
Logout
Change Password
Change Email