How to change border color in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. how to change border color in react js with code example.

To change border color, put the App.js class border: '1px solid red' to change border color.

In this article, we will change border color in react js just like you would create in a normal HTML project. Also, we will style it using normal inline CSS.

Let’s look at the following example to understand how it basically works:


import React, { useState } from 'react';

const App = () => {

  return (
    <button style={{ width: "100px", height: "50px", border: '1px solid red',}} type="submit">Submit</button>

export default App

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Check the output of the above code example.

React, Border

React, Border-color

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts