JIYIK CN >

Use borderthe css property to style the border of an element in React, e.g. <div style={{border: '1px solid rgba(0,255,0,0.3)'}}>If we need to style only a specific border, use the corresponding property, borderBottome.g.

const App = () => {
  return (
    <div>
      <div style={{border: '1px solid red'}}>Some content here</div>

      <br />

      <div style={{border: '1px dashed red'}}>Some content here</div>

      <br />

      <div style={{border: '1px solid rgba(0,255,0,0.3)'}}>
        Some content here
      </div>

      <br />

      <div style={{border: '2px dotted red'}}>Some content here</div>

      <br />

      <div style={{borderBottom: '2px dotted red'}}>Some content here</div>

      <br />
      <br />

      <div style={{borderTop: '2px dotted red'}}>Some content here</div>
    </div>
  );
};

export default App;

These examples show how to style an element's border CSS property in React.

Note that we have to wrap the value of the border property in a string.

<div style={{border: '1px solid rgba(0,255,0,0.3)'}}>
  Some content here
</div>

If we need to style only a specific border, for example border-bottom, use the camelCase property name - borderBottom.

<div style={{borderBottom: '2px dotted red'}}>Some content here</div>

Multi-word property names are camelCase in the object we pass to React's style property.

Alternatively, we can write the styles .cssinto a file with the extension .

.red-border {
  border: 1px solid red;
}

Here is how we import and use red-borderthe class.

// 👇️ import css file
import './App.css';

const App = () => {
  return (
    <div>
      <div className="red-border">Hello world</div>
    </div>
  );
};

export default App;

When importing global CSS files in React, it is best to import the CSS file into the index.js file.

The index.js file is the entry point of your React application, so it will always be run.

On the other hand, if we import a CSS file into a component, the CSS styles may be removed after the component is unmounted.