📪Border Radius

The following utility classes control the border-radius of elements:

.radius-{value}

Sets the border-radius property to the specified value, rounding all corners of the element.

CSS equivalent: border-radius: {value};

Example usage:

<div class="radius-4">
  <!-- Content with border-radius 4px -->
</div>

---

.radius-t-r-{value}

Sets the border-top-right-radius property to the specified value, rounding the top-right corner of the element.

CSS equivalent: border-top-right-radius: {value};

Example usage:

<div class="radius-t-r-8">
  <!-- Content with top-right corner rounded with radius 8px -->
</div>

---

.radius-t-l-{value}

Sets the border-top-left-radius property to the specified value, rounding the top-left corner of the element.

CSS equivalent: border-top-left-radius: {value};

Example usage:

<div class="radius-t-l-8">
  <!-- Content with top-left corner rounded with radius 8px -->
</div>

---

.radius-b-r-{value}

Sets the border-bottom-right-radius property to the specified value, rounding the bottom-right corner of the element.

CSS equivalent: border-bottom-right-radius: {value};

Example usage:

<div class="radius-b-r-8">
  <!-- Content with bottom-right corner rounded with radius 8px -->
</div>

---

.radius-b-l-{value}

Sets the border-bottom-left-radius property to the specified value, rounding the bottom-left corner of the element.

CSS equivalent: border-bottom-left-radius: {value};

Example usage:

<div class="radius-b-l-8">
  <!-- Content with bottom-left corner rounded with radius 8px -->
</div>

---

.round

Sets the border-radius property to 50%, creating a circular shape for the element.

CSS equivalent: border-radius: 50%;

Example usage:

<div class="round">
  <!-- Content with a circular shape -->
</div>

---

These utility classes allow you to easily control the border-radius of elements, creating rounded corners or circular shapes based on your desired values.