CSS Borda em imagem circular

[Fertiin]

Tenho a seguinte imagem:

<div class="row text-center">
		<div class="col-lg-3">
				<img src="imagens/vetor_foto_de_perfil.png" width="100" heigth="100" alt="Foto de perfil" class="fotoperfil rounded-circle" >
		</div>
</div>

Desejo adicionar uma borda ao redor dela, tentei da seguinte forma:

img.fotoperfil{
	border:1px dotted black;
}

Porém não obtive sucesso, como eu poderia fazer?

[DiF]

@Fertiin Olá.

Seja bem vindo em nosso Clube do Hardware.

 

Bem, primeiro você precisa arredondar os cantos da imagem com border-radius o elemento DIV na qual você vai inserir a imagem de background.

Veja funcionando: http://jsfiddle.net/dife/x9va6fq5/4/

 

div{
  background: url(https://upload.wikimedia.org/wikipedia/pt/a/a0/GameofThrones.png);
  width: 200px;
  height: 200px;
  background-position: center; /*posisiona a imagem no centro do elemento*/
  background-repeat: no-repeat; /*Não repete*/
  background-size: cover;  /*deixa a imagem na proporção*/
  border-radius: 110px;  /*arredonda os cantos*/
  border: 4px solid #f00; /*adiciona borda*/
}

 

Se você quer que a imagem fique inteira dentro do elemento sem "cortar e adequar ao tamanho"  use o "contain"