How can I add image under title using css?

Question

I want to exactly add image under title as linked image below using pure css. Similar image where can I find it?

and also how to position border ?

There is space between border and it is moved little down.

used css for img tag for second image:

img.profile {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    border-width: 4px;
    border-radius: .75rem;
   border-color: rgba(156,163,175,var(--tw-border-opacity));
    background-color: rgba(229,231,235,var(--tw-bg-opacity));
}

Answer 1

With pure HTML / CSS, i'll do it like so.

For the image, use flex to get the alignement you want. For the border, use box-shadow without any blur to control the offset of the border and border-radius to get the round corners.

HTML

<div class="container">
  <h1>About us</h1>
  <img src="https://cdn.pixabay.com/photo/2020/06/19/17/41/divider-5318234_1280.png">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sem ut orci varius rhoncus. Sed eu pulvinar enim. Vivamus egestas ac nisi quis semper. Nam pulvinar erat in rutrum scelerisque. Maecenas ac lectus ultricies, pretium mi in, bibendum urna. Aenean tempus aliquam leo ac dignissim. Maecenas sed porta velit. Cras ut nunc sit amet erat sagittis convallis vitae quis ante.
  </p>
</div>

CSS

.container {
  /* Flex properties */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  /* Border properties */
  box-shadow: -5px 5px 0px black; /* x-offset | y-offset | blur to 0 | color */
  border-radius: 10px; /* border-radius to get a curvy border */
  
  width: 500px;
  padding: 10px;  
}

.container > h1 {
  margin-bottom: 0px; /* Remove the space between title and img */
}

.container > img {
  max-width: 70%;
  height: 50px;
}

And the working fiddle