CODEWITHSUNDEEP
cssreactjs
user14058101
user14058101

Reputation:

Change avatar border color in React.JS

I have simple project in React.Js, in header I have avatar, when I change avatar border-color, there is not any change.

Header.css:

.header__avatar {
  display: flex;
  align-items: center;
  margin-left: 20px;
  border-color: #ff000;
  border-width: 2px;
  overflow: "hidden";
}

.header__avatar > h3 {
  margin-right: 10px;
}

Header.js:

<div class="header__avatar">
    <h3>name</h3>
    <HeaderOption  avatar={true} />
</div>

Expected Avatar:

enter image description here

Upvotes: 1

Views: 1262

Answers (3)

Neha Jha
Neha Jha

Reputation: 291

You are missing a 0 in the border color. It should be #ff0000 and not #ff000. So it must be:

.header__avatar {
    display: flex;
    align-items: center;
    margin-left: 20px;
    border-color: #ff0000;
    border-width: 2px;
    overflow: "hidden";
}

To have a round avatar with border, you also should add the border property and border-radius property to see the changes.

Example:

.header__avatar {
  display: flex;
  align-items: center;
  margin-left: 20px;
  border: thick solid;
  border-color: #ff0000;
  border-width: 2px;
  overflow: "hidden";
  border-radius: 50%;
}
.header__avatar > h3 {
    margin-right: 10px;
}

<img src="img_avatar.png" alt="Avatar" class="header__avatar">
<h3>SampleName</h3>
</div>

Sample Output:enter image description here

You can check this out for yourself at:TryItYourself-HowToCreateAvatarImages

Upvotes: 0

joshdales
joshdales

Reputation: 21

I think that it is because you are missing the border-style property. Try adding border-style: solid;.

You can also apply all three styles at the time by using border: 1px solid #ff0000

Upvotes: 2

Mohammed Ismail
Mohammed Ismail

Reputation: 308

Here is the example:

.avatar {
    border: 1px solid red;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
  <img class="avatar" src="https://via.placeholder.com/250" alt="" aria-hidden="true" data-noaft="">

Upvotes: 0

Related Questions