Nathan Precious
HOW TO CREATE A CSS CIRCLE BORDER AROUND AN IMAGE USING HTML and CSS.

Photo by Crew on Unsplash

HOW TO CREATE A CSS CIRCLE BORDER AROUND AN IMAGE USING HTML and CSS.

Nathan Precious's photo
Nathan Precious
·

2 min read

Hi there buddies,

I am back with another one on; How to create a CSS circle border around an image using HTML and CSS. (This article is written with the new frontend developer in mind.)

Alright, First things first, open a new file in HTML and CSS and save them with their respective extensions or you can use Codepen.io to try this out. For the HTML part, open an 'ankr' tag and give it a class and press enter.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="custom.scss">
</head>
<body>
       a.pic
</body>
</html>

You are free to copy and paste this in your code editor. Next, Open an image tag and a span tag inside the ankr tag. it should look like this;

<a href="#" class="pic">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOFtgOouFFE5DCi9e2RD5YbM9V_Nbn8oAtww&usqp=CAU" alt="peppa pig">
        <span>Peppa Pig</span>
    </a>

Congratulations, you are done with the HTML part, remember, you can use any image of your choice. On to the CSS part, we now give styles to the various tags and classes. You can copy, paste and analyze.

.pic{
    display: block;
    width: 200px;
    height: 200px;
    overflow: hidden;
    -webkit-border-radius: 180px;
    -moz-border-radius: 180px;
    -ms-border-radius: 180px;
    -o-border-radius: 180px;
    border-radius: 180px;
    position: relative;
    margin: 200px auto;
    text-align: center;
    margin-bottom: 10px;
    border: 3px solid #eeebe2;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5), inset 0px 3px 8px rgba(0, 0, 0, 0.5);
}

img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
}

body{
    font: bold;
    font-family: cursive;
    text-align: center;
    background:  #eeebe5;
}

.pic span{
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgb(136, 132, 132);
    background: rgba(0, 0, 0, 0.5);
    color: #eee2c2;
    padding: 4em 1em 0;
}

.pic:hover{
    display: block;
}

codepen.jpg

If you are done with this, then you have suceeded in creating a circle border around an image using HTML and CSS.

ppig.jpg

Weldone, Champ.

I hope this fixes any issue you have on how to add a circle border around an image using HTML and CSS.

HTML5CSSBeginner Developerstech