React Borders

Basic Usage

You can attach a border to an element using the border component exported from react-borders.

The below code will generate a box with triangles on all sides.

NOTE: The border component will set the position property of the parent to relative.

import React, { useRef } from 'react';
import { Border } from 'react-borders';

const BorderBox: React.VFC = () => {
	const boxRef = useRef<HTMLDivElement>(null);

	return (
		<div style={{ position: 'relative' }} ref={boxRef}>
			<Border parentRef={boxRef} type='triangles' sides={[1, 1, 1, 1]} />


The exmaple site is deployed to vercel here. It is not yet complete.


This is a function component used attach and customize borders.


For usage of this component, reference the basic usage section of the README.


The prop types for the Border component are exported from the package, if you want to use them.

import { BorderSettings } from 'react-borders';


Type: React.MutableRefObject<any> Required: true

The ref passed to the Border component should contain a reference to the element you wish to attach a border to.


Type: 'triangles' | 'ellipses' Required: true

The type of border you would like the component to display.


Type: [0 | 1 | undefined, 0 | 1 | undefined, 0 | 1 | undefined, 0 | 1 | undefined] Required: false

Each position in the array correlates to a side of the element being populated with a border. [top, right, bottom, left]

Example: [1, 0, 1, 0] would place a border on only the top and bottom

widthContrains & heightConstrains

Type: { max: number, min: number } Required: false

Sets the max height and width for each element in the border.


Type: string Required: false

Sets the color of the border elements. Anything CSS supports, this does as well.

You can even set the background to a linear gradient. All you have to do is pass the colors and when they stop, as you can see in the example below.

const Component = () => (
		sides={[1, 1, 1, 1]}
		backgroundColor='red 60%, green 20%, blue 20%'


Type: string | number required: false

This prop is used to decide how far the border should be from the element, 100% means it is on the element border, lower makes it closer, while higher does the opposite.


Type: number required: false

How far apart each element in the border should be from each other.


A interface that defines all of the props listed above, for your convenience.