Border radius

Introduction

While defining custom borders for our shape, we can define a border radius. It is a configuration that specifies each corner radius specifically, for example we can set topleft corner to 4px and bottom right to 5px.

The BorderRadius interface

It stores a configuration for a border radius.

export interface BorderRadius {
  /**
   * Top left corner radius
   */
  topLeft: number;

  /**
   * Top right corner radius
   */
  topRight: number;

  /**
   * Bottom left corner radius
   */
  bottomLeft: number;

  /**
   * Bottom right corner radius
   */
  bottomRight: number;
}

Creating a border radius

To make border radius creation simplier, Pamela offers you several useful apis.

Every corner with the same value

borderRadiusAll(val) can be used to create a border radius with every corner set to the same value.

const rad = borderRadiusAll(10);

// Now rad.topLeft will be of 10, also topRight, bottomLeft and bottomRight

Symmetric border radius

borderRadiusSym(top, bottom) can be used to create symmetric border radius. top specifies a value for topLeft and topRight. bottom is used from bottomLeft and bottomRight.

const rad = borderRadiusSym(10, 20);

// Now rad.topLeft will be equal to rad.topRight and rad.bottomLeft 
// will be equal to rad.bottomRight

Diagonal border radius

borderRadiusDg(tlbr, trbl) creates a diagonal border radius. tlbr corner radius for topLeft and bottomRight, trbl corner radius for topRight and bottomLeft.

const rad = borderRadiusDg(10, 20);

// Now rad.topLeft will be equal to rad.bottomRight

Squared border radius

When a border radius is set to 0 it is squared. Pamela offers a useful function to create a squared border radius: borderRadiusEm(). All corners will be set to 0.