The flawless circle transforming into a graceful half-oval form

Question

The flawless circle transforming into a graceful half-oval form

If my HTML structure looks like this:

<li>
  <a>
    <h2></h2>
    <img>
    <p></p>
    <button></button>
  </a>
</li>

Desiring a perfectly round image, I attempted the following CSS after reading about it in this article:

.circle-box {
  width: 70%;
  height: 0;
  margin-top: 10px;
  padding-bottom: 70%;
  border-radius: 50%;
}

The issue is that the image does not appear due to height: 0;. Removing it results in a vertically elongated oval image where only half is rounded, as shown below:

How can I resolve this problem?

html css geometry

Answer 1

Answer №1

To achieve this effect, you can utilize the border-radius property. Ensure that the height and width of the image are equal, then apply border-radius only to the top and right corners.

Check out the demonstration here: http://jsfiddle.net/lotusgodkk/GCu2D/728/

CSS:

img {    
    border-radius:50% 50% 0 0;
    height:600px; //example
    width:600px; //example
}

HTML:

<img src="http://www.lorempixel.com/600/600/sports/1/" />

If your image has unequal width and height, you can use a div element instead and set the image as the background.

CSS:

div {
    width:500px;
    height:500px;
    border-radius:50% 50% 0 0;
    background-image:url("http://www.lorempixel.com/600/400/sports/1/");
    background-repeat:no-repeat;
    background-size:cover;
}

View the demo for this method here: http://jsfiddle.net/lotusgodkk/GCu2D/729/

Answer 2

To achieve this effect, you can utilize the border-radius property. Ensure that the height and width of the image are equal, then apply border-radius only to the top and right corners.

Check out the demonstration here: http://jsfiddle.net/lotusgodkk/GCu2D/728/

CSS:

img {    
    border-radius:50% 50% 0 0;
    height:600px; //example
    width:600px; //example
}

HTML:

<img src="http://www.lorempixel.com/600/600/sports/1/" />

If your image has unequal width and height, you can use a div element instead and set the image as the background.

CSS:

div {
    width:500px;
    height:500px;
    border-radius:50% 50% 0 0;
    background-image:url("http://www.lorempixel.com/600/400/sports/1/");
    background-repeat:no-repeat;
    background-size:cover;
}

View the demo for this method here: http://jsfiddle.net/lotusgodkk/GCu2D/729/

Answer 3

Answer №2

To achieve the desired effect, simply apply a border-radius of 50%.

.circle-container {
    border-radius: 50%;
 }

Answer 4

To achieve the desired effect, simply apply a border-radius of 50%.

.circle-container {
    border-radius: 50%;
 }

The flawless circle transforming into a graceful half-oval form

Answer №1

Answer №2

Similar questions

Executing VueJS keyup handler after the previous onclick handler has been executed

Is there a way to format the text into a curved half-capsule shape?

Python regular expression problem with matching regex

Node.js on its own or in conjunction with another server software

Joining Two Texts in HTML with a Link Embedded within

Develop a cutting-edge push notification feature using PhoneGap (Cordova) technology

The function is unable to load all items from the JavaScript data within the CSS modal

Distribute divs of equal width evenly within a grid

Using Bootstrap 4 to validate credit card information with personalized error messages

Turn your mouse cursor into a dynamic and animated image using jQuery

Browsing the PHP database to access columns that are directly connected to individual profiles

What steps can be taken to ensure that only a single decimal separator is included?

Create a responsive design by using Bootstrap columns with an overflow container

Guide on duplicating an HTML element's markup and style completely

Hide dropdown when clicked outside of it

Steps for Aligning the Label and Textbox Horizontally

The function is not recognized while executing .mb_YTPlayer();

Annoying animation triggered upon loading of the page using AngularJS

iOS application becomes unresponsive when attempting to load a video within a webview, but does not

Issues arise when dealing with the CSS division layout in Internet Explorer 7