How to Add a Frame Around an Image

Ask a question
6

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

6

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>
    <html>
      <head>
        <title>Title of the document</title>
        <style>
          .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%;
          }
        </style>
      </head>
      <body>
        <div class="circle">
          <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
        </div>
      </body>
    </html>`
add comment
0

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.

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

2.By using clipPath

    .cirlce{
    clip-path: circle(50% at 50% 50%);
    }

for more Shape you can Visit https://bennettfeely.com/clippy/

add comment

Your Answer