How to Add a Frame Around an Image

Ask a question

Hi. I want to add a circle frame border for my image using CSS border properties. How can I do it?

Coin iconoffer bounty
add comment

2 Answers


For setting circle frame border for the image, set the border-radius 50% for all the sides of your border. Set border-color, border-style, border-width according to your requirements. Do not forget to set overflow: hidden; in order to make the rest of the image invisible.

` <!DOCTYPE html>
        <title>Title of the document</title>
          .circle {
          border-color: #666 #1c87c9;
          border-image: none;
          border-radius: 50% 50% 50% 50%;
          border-style: solid;
          border-width: 25px;
          height: 200px;
          width: 200px;
          overflow: hidden;
          img {
          height: 100%;
          width: 100%;
        <div class="circle">
          <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
add comment

There is a two way you can do it like
1.If your div is square then only it will get full circle otherwise it will give you ellipse.

    border-radius: 50%;
    border:2px solid #green; // Put color of your choice

2.By using clipPath

    clip-path: circle(50% at 50% 50%);

for more Shape you can Visit

add comment

Your Answer