Border

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Border color

Change the border color using utilities built on our theme colors.

Preview

Jsx

Classes

import React from 'react';
function BorderColors() {
  return (
     <>
         <div className="w-75p h-75p bg-grey-light-4 border border-primary" />
         <div className="w-75p h-75p bg-grey-light-4 border border-success" />
         <div className="w-75p h-75p bg-grey-light-4 border border-info" />
         <div className="w-75p h-75p bg-grey-light-4 border border-warning" />
         <div className="w-75p h-75p bg-grey-light-4 border border-danger" />
         <div className="w-75p h-75p bg-grey-light-4 border border-light" />
         <div className="w-75p h-75p bg-grey-light-4 border border-dark" />
         <div className="w-75p h-75p bg-grey-light-4 border border-white" />
         <div className="w-75p h-75p bg-grey-light-4 border border-teal" />
         <div className="w-75p h-75p bg-grey-light-4 border border-gold" />
     </>
  );
}

export default BorderColors;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="border border-[Value]"`	primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Border Radius

Change the border color using utilities built on our theme colors.

Preview

Jsx

Classes

import React from 'react';
function BorderRadius() {
  return (
     <>
        <div className="w-75p h-75p bg-grey-light-4 border rounded" />
        <div className="w-75p h-75p bg-grey-light-4 border rounded-top" />
        <div className="w-75p h-75p bg-grey-light-4 border rounded-bottom" />
        <div className="w-75p h-75p bg-grey-light-4 border rounded-start" />
        <div className="w-75p h-75p bg-grey-light-4 border rounded-end" />
        <div className="w-75p h-75p bg-grey-light-4 border rounded-top-start" />
        <div className="w-75p h-75p bg-grey-light-4 border rounded-top-end" />
        <div className="w-75p h-75p bg-grey-light-4 border rounded-bottom-start" />
        <div className="w-75p h-75p bg-grey-light-4 border rounded-bottom-end" />
        <div className="w-75p h-75p bg-grey-light-4 border rounded-5" />
        <div className="w-75p h-75p bg-grey-light-4 border rounded-10" />
        <div className="w-75p h-75p bg-grey-light-4 border rounded-20" />
     </>
  );
}

export default BorderRadius;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="border rounded"`	Set a default border radius of .25rem to an element
`className="border rounded-[value]"`	0 / 1 / 2 / 3 / 4 / ... / 34 / top / bottom / start / end / top-start / top-end / bottom-start / bottom-end

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Border Size

Change the thickness of a border on the fly using below border size utilities.

Preview

Jsx

Classes

import React from 'react';
function BorderSizes() {
  return (
     <>
        <div className="w-75p h-75p bg-grey-light-4 border" />
        <div className="w-75p h-75p bg-grey-light-4 border border-2" />
        <div className="w-75p h-75p bg-grey-light-4 border border-3" />
        <div className="w-75p h-75p bg-grey-light-4 border border-4" />
        <div className="w-75p h-75p bg-grey-light-4 border border-5" />
     </>
  );
}

export default BorderSizes;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="border"`	Default value is set to 1
`className="border border-[value]"`	2 / 3 / 4 / 5

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Border color
Border Radius
Border Size