Border Radius

Utilities for controlling the border radius of a widget.

The border radius constants are defined inside StiloBorderRadius

name	radius
allNone	topLeft: 0px; topRight: 0px; bottomLeft: 0px; bottomRight: 0px
topNone	topLeft: 0px; topRight: 0px
rightNone	topRight: 0px; bottomRight: 0px
bottomNone	bottomLeft: 0px; bottomRight: 0px
leftNone	topLeft: 0px; bottomLeft: 0px
topLeftNone	topLeft: 0px
topRightNone	topRight: 0px
bottomLeftNone	bottomLeft: 0px
bottomRightNone	bottomRight: 0px
allXs	topLeft: 2px; topRight: 2px; bottomLeft: 2px; bottomRight: 2px
topXs	topLeft: 2px; topRight: 2px
rightXs	topRight: 2px; bottomRight: 2px
bottomXs	bottomLeft: 2px; bottomRight: 2px
leftXs	topLeft: 2px; bottomLeft: 2px
topLeftXs	topLeft: 2px
topRightXs	topRight: 2px
bottomLeftXs	bottomLeft: 2px
bottomRightXs	bottomRight: 2px
allSm	topLeft: 4px; topRight: 4px; bottomLeft: 4px; bottomRight: 4px
topSm	topLeft: 4px; topRight: 4px
rightSm	topRight: 4px; bottomRight: 4px
bottomSm	bottomLeft: 4px; bottomRight: 4px
leftSm	topLeft: 4px; bottomLeft: 4px
topLeftSm	topLeft: 4px
topRightSm	topRight: 4px
bottomLeftSm	bottomLeft: 4px
bottomRightSm	bottomRight: 4px
allMd	topLeft: 6px; topRight: 6px; bottomLeft: 6px; bottomRight: 6px
topMd	topLeft: 6px; topRight: 6px
rightMd	topRight: 6px; bottomRight: 6px
bottomMd	bottomLeft: 6px; bottomRight: 6px
leftMd	topLeft: 6px; bottomLeft: 6px
topLeftMd	topLeft: 6px
topRightMd	topRight: 6px
bottomLeftMd	bottomLeft: 6px
bottomRightMd	bottomRight: 6px
allLg	topLeft: 8px; topRight: 8px; bottomLeft: 8px; bottomRight: 8px
topLg	topLeft: 8px; topRight: 8px
rightLg	topRight: 8px; bottomRight: 8px
bottomLg	bottomLeft: 8px; bottomRight: 8px
leftLg	topLeft: 8px; bottomLeft: 8px
topLeftLg	topLeft: 8px
topRightLg	topRight: 8px
bottomLeftLg	bottomLeft: 8px
bottomRightLg	bottomRight: 8px
allXl	topLeft: 12px; topRight: 12px; bottomLeft: 12px; bottomRight: 12px
topXl	topLeft: 12px; topRight: 12px
rightXl	topRight: 12px; bottomRight: 12px
bottomXl	bottomLeft: 12px; bottomRight: 12px
leftXl	topLeft: 12px; bottomLeft: 12px
topLeftXl	topLeft: 12px
topRightXl	topRight: 12px
bottomLeftXl	bottomLeft: 12px
bottomRightXl	bottomRight: 12px
allXl2	topLeft: 16px; topRight: 16px; bottomLeft: 16px; bottomRight: 16px
topXl2	topLeft: 16px; topRight: 16px
rightXl2	topRight: 16px; bottomRight: 16px
bottomXl2	bottomLeft: 16px; bottomRight: 16px
leftXl2	topLeft: 16px; bottomLeft: 16px
topLeftXl2	topLeft: 16px
topRightXl2	topRight: 16px
bottomLeftXl2	bottomLeft: 16px
bottomRightXl2	bottomRight: 16px
allXl3	topLeft: 20px; topRight: 20px; bottomLeft: 20px; bottomRight: 20px
topXl3	topLeft: 20px; topRight: 20px
rightXl3	topRight: 20px; bottomRight: 20px
bottomXl3	bottomLeft: 20px; bottomRight: 20px
leftXl3	topLeft: 20px; bottomLeft: 20px
topLeftXl3	topLeft: 20px
topRightXl3	topRight: 20px
bottomLeftXl3	bottomLeft: 20px
bottomRightXl3	bottomRight: 20px
allXl4	topLeft: 24px; topRight: 24px; bottomLeft: 24px; bottomRight: 24px
topXl4	topLeft: 24px; topRight: 24px
rightXl4	topRight: 24px; bottomRight: 24px
bottomXl4	bottomLeft: 24px; bottomRight: 24px
leftXl4	topLeft: 24px; bottomLeft: 24px
topLeftXl4	topLeft: 24px
topRightXl4	topRight: 24px
bottomLeftXl4	bottomLeft: 24px
bottomRightXl4	bottomRight: 24px
allXl5	topLeft: 28px; topRight: 28px; bottomLeft: 28px; bottomRight: 28px
topXl5	topLeft: 28px; topRight: 28px
rightXl5	topRight: 28px; bottomRight: 28px
bottomXl5	bottomLeft: 28px; bottomRight: 28px
leftXl5	topLeft: 28px; bottomLeft: 28px
topLeftXl5	topLeft: 28px
topRightXl5	topRight: 28px
bottomLeftXl5	bottomLeft: 28px
bottomRightXl5	bottomRight: 28px
allXl6	topLeft: 32px; topRight: 32px; bottomLeft: 32px; bottomRight: 32px
topXl6	topLeft: 32px; topRight: 32px
rightXl6	topRight: 32px; bottomRight: 32px
bottomXl6	bottomLeft: 32px; bottomRight: 32px
leftXl6	topLeft: 32px; bottomLeft: 32px
topLeftXl6	topLeft: 32px
topRightXl6	topRight: 32px
bottomLeftXl6	bottomLeft: 32px
bottomRightXl6	bottomRight: 32px
allFull	topLeft: 9999px; topRight: 9999px; bottomLeft: 9999px; bottomRight: 9999px
topFull	topLeft: 9999px; topRight: 9999px
rightFull	topRight: 9999px; bottomRight: 9999px
bottomFull	bottomLeft: 9999px; bottomRight: 9999px
leftFull	topLeft: 9999px; bottomLeft: 9999px
topLeftFull	topLeft: 9999px
topRightFull	topRight: 9999px
bottomLeftFull	bottomLeft: 9999px
bottomRightFull	bottomRight: 9999px

Usage Example

Center(
    child: Row(
      children: [
        Container(
          margin: StiloEdge.all5,
          width: StiloWidth.w56,
          height: StiloHeight.h36,
          decoration: BoxDecoration(
            color: StiloColor.blue[500],
            borderRadius: StiloBorderRadius.allMd,
          ),
        ),
        Container(
          width: StiloWidth.w36,
          height: StiloHeight.h64,
          decoration: BoxDecoration(
            color: StiloColor.red[500],
            borderRadius: StiloBorderRadius.bottomXl,
          ),
        ),
      ],
    ),
  )