html неполная рамка

#html #css

Подскажите, как можно реализовать в html и css такие полуокружности под фотографиями?
Border тут не подойдёт, как я понимаю.

    

Ответы

Ответ 1

минимум кода



img {
  display: block;
  width: 200px;
  border-radius: 100%;
}
div {
  display: inline-block;
  width: 200px;
  padding: 10px;
  border-bottom: 10px solid red;
  border-radius: 100%;
  border-left: 10px solid transparent;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
}

  



Ответ 2

Для скругленных краев добавьте к диву псевдоэлементы before и after:



img {
  display: block;
  width: 200px;
  border-radius: 100%;
}
div {
  display: inline-block;
  width: 200px;
  padding: 10px;
  border-bottom: 10px solid red;
  border-radius: 100%;
  border-left: 10px solid transparent;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  
  position:relative;
}
div:before,div:after{
  content:'';
  height:9px;
  width:9px;
  border-radius:200%;
  background-color:red;
  position:absolute;
  bottom:19px;
}
div:before{left:18px}
div:after{right:18px}