border radius color in 2 colors

I was able to stylize a <div> only to make the image border with transform:rotate(deg45) . This will rotate <div> and <img> .
Then in the <img> class just use 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)
}

Option 1 - Closer to your code

Your problem is that rotating the container of the image will rotate everything inside.

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

See what's 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 that I would indicate

Using linear-gradiente to do the "edge", with this technique you use a linear gradient with two goals in 50%, one with each color, the white border you put in the same image. This way you do not even have to worry about rotating anything and you do not need a pseudo element, because the gradient is already aligned top to bottom

I found this option more responsive, but easy to customize 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>