I need help creating rounded images with borders

HTML & CSS
1

Hi there. Please can anyone help me by explaining how I make a photograph round with 2 outer borders of different colours as in the example here (upper left corner of the page): https://ishadeed.com/. I guess this can be done using CSS but I’ve been unable to understand exactly how.

Once I’ve created the rounded image and added its borders I also need help to be able to include it on my page so as to remain in a fixed position and for the image to scale down depending on the size of the viewport in just the same way as the image on the example page does.

Any advice, code examples, and links to relevant tutorials would be appreciated.

1 Like
2

All you need to do is give the image a 50% border-radius and then give it the border color you want. You can make an out border or shadow using box-shadow.

The above would assume the image is square to start with but you could force it to be square and then use object-fit to maintain aspect ratio.

e.g.

.

.round {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid red;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
  margin: 1rem;
}

Even the box shadow is a gradient shadow you can make it solid if you want.

1 Like
3

Similar to @PaukOB’ s solution, here is a basic page code,
which would allow for a variable img size…

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Page Description</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

 <h1>page description</h1>

 <div class="portrait-container">
  <img src="https://i.postimg.cc/bwkbZxnT/face.jpg" alt="face">
 </div>

</body>
</html>

screen.css

body {
   background-color: #fff;
   font: normal 1em / 1.5  sans-serif;
 }
 h1{
   font-size: 1.5em;
   font-weight: normal;
   color: #555;
   text-align: center;
   text-transform: capitalize;
 }
.portrait-container {
   max-width: 20em;
   padding: 2em;
   margin: 1em auto;
   box-sizing: border-box;
 }
.portrait-container img {
   display: block;
   width: 100%;
   height: auto;
   border: 1px solid #333;
   border-radius: 50%;
   box-shadow: 
     0 0.5em 1em 0 rgba(0, 0, 0, 0.2), 
     0 0 0 0.75em #ccc, 
     0 0 0 1.5em #ddd;
 }

The result may be seen here,

https://codepen.io/Snady_Leiby/full/BaGKrQb

1 Like
4

Thanks, Paul. This all appears very simple and straightforward and I’m going to go experiment. As for including this on my page in a position that remains fixed no matter what sized viewport, and that scales down gracefully depending on screen size, how would I do this?

1 Like
5

Thank you very much for taking the time to reply to my question and for the solution you’ve provided. Your explanation of how to achieve the desired results is clear and simple and easy for me to understand, and together with Paul’s solution, I’m going to go experiment and hopefully get this up and running without further problems. :smile:

1 Like
6

I deleted your question from the other thread and reproduced it here :slight_smile:

The images are basically responsive anyway but I’ve changed my codepen to something a little more usable.

I’ve wrapped the images in a div which will be control the size and the images will be height::100% and width:100%. The aspect ratio of 1/1 will ensure they are round.

If you want them position:fixed then use position:fixed and suitable co-ordinates. Remember position:fixed elements don’t move and will cover any content in the way.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.