<p className="box-title mb-4 !text-[0.813rem] 
!font-normal">Use <code> .img-fluid </code>class to the img tag to get 
responsive image.</p><div className="text-center">
<img src="../../../assets/images/media/media-48.jpg" 
className="img-fluid !inline-flex" alt="..." /></div>

<p className="box-title mb-4 !text-[0.813rem]
 !font-normal">Use <code>.rounded-md</code> class along with <code>.
 img-fluid</code> to get border radius.</p><div className="text-center">
 <img src="../../../assets/images/media/media-49.jpg" 
 className="img-fluid !rounded-md !inline-flex" alt="..." /></div>

<p className="box-title mb-4 !text-[0.813rem] 
!font-normal">Use <code>.rounded-full</code> class to <code>img</code> 
tag to get rounded image.</p><div className="text-center">
<img src="../../../assets/images/media/media-50.jpg" 
className="img-fluid !rounded-full !inline-flex" alt="..." /></div>

<img className="!rounded-md float-start" 
src="../../../assets/images/media/media-53.jpg" alt="..." />

<img className="!rounded-md mx-auto block" 
src="../../../assets/images/media/media-55.jpg" alt="..." />

<img className="!rounded-md ltr:float-right
 rtl:float-left" src="../../../assets/images/media/media-54.jpg" alt="..." />

<div className="flex justify-between gap-2">
<figure className="figure inline-block mb-4"><img className="m-[0.125rem] 
leading-none img-fluid rounded-md w-full"
 src="../../../assets/images/media/media-56.jpg" alt="..." />
 <figcaption className="text-[0.875em] text-textmuted dark:text-white/70 mt-2">
 A caption for the above image.</figcaption>
 </figure>
 <figure className="figure ltr:float-right rtl:float-left">
 <img className="m-[0.125rem] leading-none img-fluid rounded-md w-full"
  src="../../../assets/images/media/media-57.jpg" alt="..." />
<figcaption className="text-[0.875em] text-textmuted dark:text-white/70 
text-end mt-2">A caption for the above image.
</figcaption>
</figure>
</div>

<p className="mb-3">Use <code>ti-img-thumbnail</code> to give an image a rounded 1px border.</p>
<div className="text-center">
<img src="../../../assets/images/media/media-51.jpg" className="ti-img-thumbnail" alt="..." />
</div>

<p className="mb-3">Use <code>ti-img-thumbnail-rounded</code> to give an image a rounded 1px border.</p>
<div className="text-center"><img src="../../../assets/images/media/media-52.jpg" className="ti-img-thumbnail-rounded" alt="..." />
</div>