border radius color in 2 colors

I'm trying to put 2 Border colors with border radius but I can't. The goal is to stay like this: insert the description of the image here

But I can only leave it like this:

insert the description of the image here

Follows 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;
Author: Lucas Fieri, 2018-10-22
Source

2 answers

Option 1-closest to your code

Your problem is that by rotating the container of the image vc rotates everything inside as well.

My tip is for you to create these embroider in a pseudo element , so you can rotate it freely without interfering with the contents of the 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 to which I would indicate

Using linear-gradiente to make the "edge", with this technique vc uses a linear gradient with two targets at 50%, one with each color, the White edge vc puts on the same image. This 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>
 2
Author: hugocsl, 2018-10-22 22:29:49

I managed to do by stylizing a <div> only to make the edge of the image with the transform:rotate(deg45). This will rotate to <div> and to <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)
}
 0
Author: Lucas Fieri, 2018-10-25 23:18:10