$2.72

How to Add a Frame Around an Image

Ask a question+
7

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

Ian 280
add comment

3 Answers

6

For setting a 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; 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>`
Muhamed Aziz 320
add comment
1

If you want to make a circle frame border for your image, you need to 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>

Azniv Saroyan 150
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