Setting style for the border radius property in React

Setting style for the border radius property in React #

Use the borderRadius CSS property to set the border radius style of an element in React, e.g. <div style={{border: '1px solid red', borderRadius: '30px'}}>. If you need to style a specific border, use the corresponding property, e.g. borderBottomLeftRadius.

App.js

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

      <br />

      <div style={{border: '1px dashed red', borderRadius: '25% 10%'}}>
        Some content here
      </div>

      <br />

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

      <br />

      <div style={{border: '2px dotted red', borderRadius: '10% / 50%'}}>
        Some content here
      </div>

      <br />

      <div
        style={{
          border: '2px solid red',
          borderBottomLeftRadius: '30px',
          borderBottomRightRadius: '30px',
        }}
      >
        Some content here
      </div>
    </div>
  );
};

export default App;

The examples show how to style the border-radius CSS property of an element in React.

Note that you have to wrap the value of the borderRadius property in a string.

App.js

Copied!
<div style={{border: '1px solid red', borderRadius: '30px'}}>
  Some content here
</div>

If the border radius style is not being updated, you could be overriding it somewhere else in your code.

You could try to set the style to !important.

App.js

Copied!
<div
  style={{border: '2px solid red'}}
  ref={el => {
    if (el) {
      el.style.setProperty('border-radius', '25% 10%', 'important');
    }
  }}
>
  Hello world
</div>

The function we passed to the ref prop will get called with the element, so we can programmatically set its properties to important.

If you only need to set the border radius for a specific border, use camelCased property names - borderBottomLeftRadius, borderBottomRightRadius, etc.

App.js

Copied!
<div
  style={{
    border: '2px solid red',
    borderBottomLeftRadius: '30px',
    borderBottomRightRadius: '30px',
  }}
>
  Some content here
</div>

Multi-word property names are camelCased in the object we pass to the style prop in React.

Alternatively, you can write your styles in a file with a .css extension.

App.css

Copied!
.red-rounded-border {
  border: 1px solid red;
  border-radius: 30px;
}

And here is how we would import and use the red-rounded-border class.

App.js

Copied!
import './App.css';

const App = () => {
  return (
    <div>
      <div className="red-rounded-border">Some content here</div>
    </div>
  );
};

export default App;

When importing global CSS files in React, it's a best practice to import the CSS file into your index.js file.

The index.js file is the entry point of your React application, so it's always going to be ran.

On the other hand, if you import a CSS file into a component, the CSS styles might get removed once your component unmounts.

Setting style for the border radius property in React

Setting style for the border radius property in React #

Borislav Hadzhiev