Using CSS3 Border-radius property for designing an oval shape similar to an egg

I'm currently experimenting with CSS3 to create various random shapes. Right now, I'm facing a challenge with the Egg Shape. I've researched the mathematical composition of Egg Shapes, which consist of two circles with different radii. However, I am struggling to connect this basic structure with the CSS code provided here, particularly the "border-radius" section.

#egg {
  display:block;
  background-color:green;
  width:126px; 

  /* The width should be 70% of the height */
  /* Can use width:70%; in a square container */
  height:180px;

  /* Note that Safari requires actual px for border radius (bug) */
  -webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;

  /* This may fail in Safari, but still works in Chrome */
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}
htmlcsscss-shapes

Answer №1

Understanding Curve Radii: the ‘border-radius’ properties

The 'border-*-radius' properties use two length or percentage values to determine the radii of a quarter ellipse that shapes the corner of the outer border edge. The first value represents the horizontal radius, while the second one indicates the vertical radius. If the vertical radius is not specified, it inherits the value of the horizontal radius. A corner will be square instead of rounded if either length is set to zero. When using percentages, the horizontal radius is based on the width of the border box, and the vertical radius corresponds to the height of the border box. Negative values are not permitted.

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;


.egg {
    display: block;
    width: 120px;
    height: 180px;
    background-color: green;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
<div class="egg"></div>

Explore more about border radius using slash syntax.

Answer №2

As outlined in the border radius specification

When values are specified before and after the slash, the former determines the horizontal radius while the latter determines the vertical radius.

To achieve an egg shape, increase the vertical radius at the top and decrease it at the bottom.

Answer №3

Breaking down your border radius:

border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 50% 40%;
border-top-left-radius: 50% 60%;
border-top-right-radius: 50% 60%;

Let's delve deeper into the top-left radius:

  • The first value represents the horizontal radius, rounding the border to half of its width.
  • The second value indicates the vertical radius, curving down to 60% of the element's height.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The identification of the field is not being transmitted by ng-select

Looking for help with Angular! I have an ng-select box where I can choose countries, and it's working fine when I select an option and submit - it submits the id as expected. However, when pre-populating the ng-select with data and submitting, it&apos ...

javascripthtmlangulartypescript

Ways to stop a JS plugin affecting HTML anchors and preventing them from automatically scrolling to the top

My friend is working on a website and he's using a plugin called Flip Lightbox. The basic functionality of the plugin is that when you click on an image, it flips over and pops out as a lightbox. Everything works fine, however, if you scroll down the ...

javascriptjqueryhtmlcss

Choose a specific option from the dropdown menu using a URL parameter

After reviewing this code snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> // <![CDATA[ $(document).ready(function() { // Parse your query parameters here, and assi ...

javascripthtmljqueryforms

Animating object on display and returning it with keyframes

Given the code snippet below: <div class="leftBox"> <div class="mainNode" ></div> </div> <script type="text/javascript"> $('.mainNode').click(function() { var element = $('.mainNode'); if (!ele ...

javascriptcssanimationcss-animationskeyframe

CSS switch status toggle

Here's my code for a toggle switch from . I'm trying to change the label before the switch/checkbox to display "checked" or "not checked" based on the toggle state. When I click on the label, it changes the switch but not the text. JavaScript: ...

javascriptjqueryhtmlcss

Increasing the width of a column in CSS

Looking to set a maximum width for my table using the size attribute in the <table> tag. However, the table keeps stretching horizontally and causing a bottom scroll bar to appear. Even after refreshing the page or making changes in the console, noth ...

javascriptjqueryhtmlcssangularjs

The Chrome extension I created using JQuery to trigger 'keyup' events is not updating the value of the 'input' field on a website that utilizes knockout JS

I am currently working on developing a Google Chrome extension for a website that appears to be utilizing 'knockout JS'. Let's take a look at the HTML element below: <input type="text" class="form-control text-right" id="amount" autoco ...

javascriptjqueryhtmlknockout.jsgoogle-chrome-extension

Issues with jQuery Ajax sending Post data to PHP script

I've been attempting to transfer variables from my JavaScript to a PHP file using AJAX, but for some reason, it's not functioning as expected. Despite researching numerous similar queries, I have yet to come across a solution. Here is an excerpt ...

javascriptphphtmlajax

The animation for the Bootstrap modal is not functioning correctly

Whenever I click the button to open the modal window, it just pops up without any animation or fade effect. I attempted to add classes like .fade and .modal-fade to the modal, but nothing changed. You can see it in action on my test page. Simply click th ...

cssbootstrap-4bootstrap-modal

Automatically save a dropdown menu selection

Is there a way to automatically save the data selected in a drop down list without having to click on a save button? public ActionResult SelectFeedBack(int id) { YelloAdminDbContext db = new YelloAdminDbContext(); ViewBag.FeedBack ...

htmlasp.net-mvc-4asp.net-mvc-controller

Having difficulty retrieving word documents

We recently deployed an asp.net (C#) application on our iis 8.5 server. The application was functioning properly for a while, allowing users to download or preview word files. However, it suddenly stopped working after a server restart. Typically, we res ...

c#htmlasp.netrestsharepoint

Eliminate gaps created by grid rows by incorporating elements of varying heights

This is the standard format of the page: * { margin: 0; padding: 0; } img { width: 100%; float: left; } #grid { display: grid; grid-template-columns: repeat(3, 1fr); } #test-one { grid-column-start: 1; grid-column-end: 2; width: 100 ...

cssgridcss-grid

Display modal after drop-down selection, triggered by API response

Currently, I am working on integrating an API to enable users to make payments through a modal. Users should be able to enter an amount and select a payment frequency. I have successfully extracted various payment frequencies from the API response and pop ...

javascriptjqueryhtmlapivue.js

The background-color and text color properties in CSS are failing to apply

Struggling with my HTML homework, following the book instructions but still getting errors. Can anyone here help me figure out what's wrong? questions: 1: Add a blank line after the CSS reset style rule, add a comment with the text, Style rule for bo ...

htmlcss

Modifying Checkbox BorderWidth in Material UI v5

Seeking assistance with adjusting the checkbox border width in Material UI v5. I currently have a custom checkbox and would like to remove the border width. Despite trying numerous solutions, I have been unsuccessful so far. checkbox <Checkbox de ...

cssreactjsmaterial-uinext.jsjss

When Chrome DevTools are opened, some elements of a webpage undergo a transformation in their style

I've recently started working on a static webpage using VueJS/NuxtJS and Buefy as the UI library, although I am still learning about these technologies. One issue that I have encountered is that certain elements on the page change style when I open C ...

cssvue.jssassgoogle-chrome-devtoolsmedia-queries

Preventing JavaScript from refreshing the page when using location.replace for the second time with the identical URL

I've encountered an issue while using location.replace to reload a page that relies on GET variables for displaying a success message. The problem arises when the URL specified in the location.replace call is identical to the current one, causing the ...

phpjavascriptjqueryhtmlajax

Problem with integrating slick slider into iframe

After incorporating iframes within a Slick slider, the scrolling feature seems to have stopped working. How can I troubleshoot this issue and restore the scrolling functionality? Here is the HTML snippet provided: HTML: <div class="smaller-cards"> ...

jqueryhtmliframeuiscrollviewslick.js

Is there a way to apply box-shadow to only specific sides?

Which specific values should be set for a box-shadow to exclusively display at the bottom? ...

css

Want to learn how to center a webpage only for a specific device width? For example, have your mobile device display the content in the center, while

Hello! I'm new to the world of @media queries and am currently trying to make my webpage responsive by centering it on smaller devices while keeping the display normal on larger screens. My website, mastercontrolunit.com, looks great in deskto ...

htmlcss