Image Chips

<style>
* { box-sizing: border-box; }
.imgchip {
  position: relative;
  padding:0 20px;
  font-size: 16px;
  line-height: 50px;
  border-radius: 25px;
  background-color: #f1f1f1;
  min-width: 120px;
  display:inline-block;
}
.imgbox {
  position: absolute;
  top:0px;
  height: 50px;
  width: 50px;
  overflow:hidden;
  border-radius: 50%;
  box-shadow: 0 2px 2px rgba(0, 0,0, 0.4);
}
.imgbox img {
  max-width:100%
}
</style>
<div class="imgchip">Rahul
  <div class="imgbox">
    <img src="images/aaa2.jpg" alt="pic">
  </div>
</div>

Rahul
pic
.imgchip {
  padding-left:55px;
}
.imgbox{ left:0; }
Rahul
pic
.imgchip {
  padding-right:55px;
}
.imgbox{ right:0; }
Rahul
pic
.imgchip {
  padding-left:55px;
}
.imgbox{ top:-25px;left:0; }
Rahul
pic
.imgchip {
  padding-right:55px;
}
.imgbox{ top:-25px;right:0;}
Rahul
pic
.imgchip {
  padding-left:55px;
  border-radius:5px
}
.imgbox{
  left:0;
  border-radius:5px;
  box-shadow: 1px 0 2px rgba(0,0,0,0.4);
}
Rahul
pic
.imgchip {
  padding-right:55px;
  border-radius:5px
}
.imgbox{
  right:0;
  border-radius:5px;
  box-shadow: -1px 0 2px rgba(0,0,0,0.4);
}
Rahul
pic
.imgchip {
  padding-left:55px;
  border-radius:5px
}
.imgbox{
  left:0;
  border-radius:5px;
  box-shadow: 1px 0 2px rgba(0,0,0,0.4);
  border: 2px solid #00d0d4;
}
Rahul
pic
.imgchip {
  padding-right:55px;
  border-radius:5px
}
.imgbox{
  right:0;
  border-radius:5px;
  box-shadow: -1px 0 2px rgba(0,0,0,0.4);
  border: 2px solid #00d0d4;
}
receipt
settings_ethernet