Circle a div in html and css

Question

Circle a div in html and css

1.4k views Asked by mmm At 12 April 2021 at 07:39

I want to circle a div that contains a live preview of the webcam using webcam.js. I have tried to make it into a circle, but only the sides became round.

This is the html for the webcam div:

<div id="camera" class="camera" ></div>

This is the css code:

body
{
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.camera
{
  width: 450px;
  height: 450px;
  border-radius: 50%;
  overflow: hidden;
  transform: rotateY(180deg);
}

This is my js code:

Webcam.set({

            dest_width: 600,

            dest_height: 600,

            image_format: 'jpeg',

            jpeg_quality: 90

    });

Webcam.attach( '#camera' );

Original Q&A

There are 4 answers

**Codeneutrino** · Answer 1 · 2021-04-12 07:49:14

If you set border-radius to 100%, you should get a circle (provided height and width are the same values. As for the programming etiquette in a situation like this, I don't know…

**Ruhul Amin** · Answer 2 · 2021-04-12 08:00:37

You can use border-radius: 100%; to make the div circle.

.camera
{
  width: 450px;
  height: 450px;
  border-radius: 100%;
  overflow: hidden;
  transform: rotateY(180deg);
}

Updated :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body
{
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.camera
{
  width: 450px;
  height: 450px;
  border-radius: 100%;
  overflow: hidden;
  background:red;
}

</style>
</head>
<body>
<div id="camera" class="camera" ></div>

</body>
</html>

Output :

**svin83** · Answer 3 · 2021-04-12 08:27:19

I'm guessing your webcam code scales to fit it's parent element...

Put #camera inside another div.
Both should have equal height and width.
Both should hide overflow.
Only the outer div should be circular. Not the one passed Webcam.attach()

**Joel** · Answer 4 · 2021-04-12 08:30:22

From the screenshot you posted, there seems to be no issue with the CSS but rather with the webcam feed aspect ratio, try adapting the values of webcamJS with relative values:

CSS - Change the border to 100%

body
{
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.camera
{
  width: 450px;
  height: 450px;
  border-radius: 100%;
  overflow: hidden;
  transform: rotateY(180deg);
}

JS - Set the height to a relative value

Webcam.set({

            dest_width: 600,

            dest_height: 600/1.33500,

            image_format: 'jpeg',

            jpeg_quality: 90

    });

Webcam.attach( '#camera' );

You can check it on codepen https://codepen.io/godpers/pen/ExZQpEQ

TechQA.

Circle a div in html and css

There are 4 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in WEBCAM.JS

Popular Questions

Popular Tags

Trending Questions