Chakra UI Borders

Last Updated : 05 Feb, 2024

Chakra UI is a popular React component library that simplifies the process of building user interfaces with a set of customizable and accessible components. Among those feature it also provide support for styling and layout including the management of borders. It provides various properties to customize borders. In this article, we will learn about Implementation of borders in Chakra UI.

Prerequisites:

Approach:

We have created a UI Flex Box and inside that box we are using the Box and one button to demonstrate different styles of borders. To use a Box and Button component, we have to import it from “@chakra-ui/react” module. Chakra UI provides various props to modify the borders and border radius.

This are the some of the key props to modify the borders: border, borderWidth, borderStyle, borderColor, borderTop, borderRight, borderBottom, borderLeft, borderX, borderY and borderRadius.

Steps to Create React Application and Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app gfg

Step 2: After creating your project folder(i.e. gfg), move to it by using the following command:

cd gfg

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Project Structure:

chakra-border-structure

The updated dependencies in package.json file:

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^11.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
}

Example: The below example is demonstrating the use of Borders in Chakra UI

Javascript

//File path: src/App.js
import { Box, Button, Heading }
    from "@chakra-ui/react";
 
function App() {
    return (
        <>
            <Box textAlign="center">
                <Heading as="h1" color="green">
                    Chakra UI Borders | GeeksForGeeks
                </Heading>
            </Box>
            <Box
                m={10}
                display="flex"
                alignItems="center"
                justifyContent="space-around"
                height="70vh"
                flexWrap="wrap"
                border="2px dashed black">
 
                <Box border="5px solid red">
                    {'<Box border="5px solid red">'}
                </Box>
                <Box border="5px solid blue" borderRadius="10px">
                    {'<Box border="5px solid blue" borderRadius="10px">'}
                </Box>
                <Box border="5px dashed black">
                    {'<Box border="5px dashed black">'}
                </Box>
                <Box borderY="5px solid black">
                    {'<Box borderY="5px solid black">'}
                </Box>
                <Box borderX="5px solid black">
                    {'<Box borderX="5px solid black">'}
                </Box>
                <Box borderTop="5px solid black">
                    {'<Box borderTop="5px solid black">'}
                </Box>
                <Box borderBottom="5px solid black">
                    {'<Box borderBottom="5px solid black">'}
                </Box>
 
                <Button border="2px dotted black" borderRadius="10px">
                    {'<Button border="2px solid black" borderRadius="10px">'}
                </Button>
            </Box>
        </>
    );
}
 
export default App;