border Radius color in 2 colors

Question

I’m trying to put 2 border colors with Radius but I can’t. The goal is to stay like this:

But I can only make it so:

Follow code where . Detail is the image:

.detail {
width: 170px;
height: 170px;
border-radius: 100%;
margin: auto;
position: relative;
border-bottom: 3px solid rgb(75, 87, 100);
border-right: 3px solid rgb(75, 87, 100);
border-left: 3px solid rgb(233, 128, 99);
border-top: 3px solid rgb(233, 128, 99);
padding: 1px;

Answer 1

Option 1 - closer to your code

Your problem is that when rotating the container image you rotate everything inside too.

My tip is you create these embroider in a pseudo element, so you can rotate it freely without interfering with the content of div

See how it looks in this example

.borda {
    width: 100px;
    height: 100px;
    position: relative;
    border: 2px solid #fff;
    border-radius: 50%;
}
.borda img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    object-fit: cover
}
.borda::after {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    z-index: -1;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid black;
    border-top-color: red;
    border-right-color: red;
    transform: rotate(-45deg);
}

<div class="borda">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Praia_de_Copacabana_-_Rio_de_Janeiro%2C_Brasil.jpg/250px-Praia_de_Copacabana_-_Rio_de_Janeiro%2C_Brasil.jpg" alt="">
</div>

---

Option 2 I would indicate

Using linear-gradiente to make the "edge", with this technique you use a linear gradient with two targets at 50%, one with each color, the white edge vc puts in the same image. That way you don’t even have to worry about rotating anything and you don’t need a pseudo element, because the gradient is already aligned top to bottom

I found this option more responsive, but easy to customize and with less code.

* {
    box-sizing: border-box;
}
.borda {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    padding: 4px;
    display: flex;
    background-image: linear-gradient(to bottom, red 0, red 50%, black 50%);
}
.borda img {
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
}

<div class="borda">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Praia_de_Copacabana_-_Rio_de_Janeiro%2C_Brasil.jpg/250px-Praia_de_Copacabana_-_Rio_de_Janeiro%2C_Brasil.jpg" alt="">
</div>

Answer 2

I managed to do it by styling a <div> only to make the image border with the transform:rotate(deg45). This will rotate the <div> and the <img>.
Then in the class of <img> just use the transform:rotate(-deg45) to invert only the image.

.imagem {
   width: 170px;
   height: 170px;
   border-radius: 50%;
   margin: auto;
   position: relative;
   padding: 1px;
   transform:rotate(-deg45)


.borda {
    border-radius: 50%;
    border-bottom: 3px solid rgb(75, 87, 100);
    border-right: 3px solid rgb(75, 87, 100);
    border-left: 3px solid rgb(233, 128, 99);
    border-top: 3px solid rgb(233, 128, 99);
    transform:rotate(deg45)
}