The peculiar characteristics of border-radius

Discovering a new way to create elliptical border-radius has opened up my design options.

border-radius: horizontal radius / vertical radius

At first, I experimented with border-radius: 10px 20px/10px, and it worked perfectly.

But when I tested 

border-radius: 20px/10px 10px/10px
, Chrome Developer Tool flagged it as incorrect.

Seeking clarity, I turned to MDN for guidance, only to find myself even more bewildered.

The example showed 

border-radius: 10px 5% / 20px 25em 30px 35em
, which seemed odd. Despite the explanation in the comments about values belonging to 
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
, I was left wondering about the definition of "first radius values."

The deeper I delved into this topic, the more perplexed I became. There's clearly something crucial that I'm overlooking, but what could it be?

htmlcss

Answer №1

Take a closer look at the complete code snippet:

border-radius: TLH TRH BRH BLH / TLV TRV BRV BLV;

In this format:
T/B represent Top/Bottom,
L/R represent Left/Right, and
H/V indicate Horizontal/Vertical

If you omit the "/ vertical size", the horizontal sizes will be applied by default (resulting in circular corners). If you provide less than 4 sizes, the given values will be repeated.

Once you grasp the basic framework, feel free to tweak the values and observe the effects. It's a fun way to understand how different parameters affect the outcome :)

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

Ensure that the Footer spans the entire width of the screen by using a container with fluid width, while

What is the best way to ensure that my Footer spans the full width of the browser window? Note: My website uses Bootstrap, with the Footer utilizing 'container-fluid' while the page content utilizes 'container'. Live link: HTML < ...

htmlcsstwitter-bootstrap

Creating an overlay effect when hovering over an image

Recently, I've been working on a gallery of photos that showcases different individuals. My goal is to have information about each person displayed when their respective photo is hovered over - including their name and role. .gallery { position: ...

htmlcssoverlay

Create a design where two columns can be scrolled independently and extend to fit the height of the viewport

I have successfully created a JS Fiddle that demonstrates exactly what I am looking for: http://jsfiddle.net/j7ay4qd8/5/ This Fiddle features two columns that can be scrolled separately, and different sections of the left column can be easily scrolled to ...

csstwitter-bootstrapflexboxbootstrap-4responsive

How can I ensure that my data remains properly aligned in a row with 9 columns while utilizing bootstrap?

My approach to creating a row with 9 columns involved using custom CSS to set each column's width to 11.11%, resulting in equal distribution across the row. I then applied the "custom-column" class to populate the row data: .custom-column { widt ...

htmltwitter-bootstrapcss

Is it possible to eliminate repeated words within an HTML element's text content?

I am struggling with replacing words in HTML. <p id ="demo">Hello, Hello how are you! </p> I want the final result to be: Hello, how are you! My solution involves filtering out duplicates and joining them back together. var s ...

javascriptjqueryhtml

Placement of image links

Wondering if there's a way to accomplish this. Can a hyperlink be placed on specific coordinates within an image? Example: _____________________________________ | | | xxx | | xxx ...

javascripthtml

What is the best way to create divs with no gaps in between them?

I am trying to create a div structure that resembles the one shown below, with one div on top and two divs under it. I would prefer not to use tables, ensuring there is no space between the divs, and if possible, having collapsed borders. _________ | ...

csshtmlcss-position

Mastering @media queries to dynamically alter widths in prop styled components

I have a unique component that utilizes an object with its props for styling. const CustomSection = ({ sectionDescription, }) => { return ( <Text {...sectionDescription} content={intl.formatMessage({ id: &apos ...

cssreactjs

Tips for fading out two elements after completing a drag and drop action

Visit this Codepen for more examples - Codepen I have been developing a drag and drop feature in my application. Once the item is dropped, it transitions from red to green and fades out smoothly. The droppable element behind the draggable should also fad ...

javascriptjqueryhtmlcssjquery-ui

What is the best way to limit data loading when tabs are clicked in an AngularJS application?

My application has 2 tabs and all data is fetched from an API response. Initially, all data is loaded at once. The two tabs are: Tab 1 Tab 2 By default, Tab 1 is always active. I only want to load data for Tab 1 initially and not for Tab 2. When I c ...

javascripthtmlangularjs

What is causing this alert to remain open?

I've been struggling to close the alert within the body section. I've tried various fixes but can't seem to figure it out. Can anyone spot what's wrong here? It's just a practice exercise, but I'd really appreciate some help. ...

htmlcssbootstrap-4

Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

It seems that there are some style issues occurring in the production build hosted on Netlify for a specific component. The problematic component is a wrapper located at ./layout/FormLayout.tsx. Below is the code for this wrapper: const FormLayout: React.F ...

javascriptcssreactjsnext.jstailwind-css

Vue JS console displays an error stating "the <li> tag is missing a closing tag."

Below is the code snippet I am currently using to change the color based on the character's name: I encountered an error indicating that the li tag was not properly closed, although it appears to be closed. However, there seems to be an issue during ...

javascripthtmlcssvue.js

What is the best way to keep a <div> class anchored to the bottom of an HTML page?

I am looking to incorporate a footer into my website that stays fixed at the bottom of the screen. However, I have encountered an issue: Here is what I have attempted so far: .footer { position: absolute; width: 100%; background: #0084FF; ...

htmlcss

Guide: Previewing uploaded images with HTML and jQuery, including file names

Any constructive criticism and alternative methods for accomplishing this task are welcomed. I am currently working on writing jQuery code that will allow users to preview file(s) without reloading the DOM. To achieve this, I have been using .append() to ...

javascriptjqueryhtmlcss

Creating a dynamic search feature that displays results from an SQL database with a dropdown box

Is there a way to create a search bar similar to those seen on popular websites like YouTube, where the search results overlay the rest of the page without displacing any content? I've searched extensively on Google and YouTube for tutorials on databa ...

javascripthtmlcsssearchdropdown

Is your Chrome DevTools changing CSS Link files to "Constructed Stylesheet" after you edit the CSS using Inspect Element? Find out how to fix this issue!

This issue relates to CSS files that are initially not identified as constructed stylesheets but end up being displayed as such after editing, rendering the file inaccessible. Specifically in Google Chrome DevTools (last observed in Chrome 86): Whenever ...

cssgoogle-chromegoogle-chrome-devtoolsinspect-element

What is the best way to implement a calendar view for selecting time periods on an HTML page?

Is there a way to implement a calendar view when clicking on the input box within an HTML page? I am looking to create a function where users can select a time period to generate a file. How can this be accomplished? If possible, could you share some samp ...

javascriptjqueryhtmlmysql

Changing the position from fixed to static

It's strange, but for some reason when I attempt to apply position:fixed using jQuery: $('#footer').css('cssText', 'position:fixed !important;'); to my footer, the result on the page is different: <div id="footer" ...

jqueryhtmlcss

Next.JS CSS modules are experiencing issues with functionality

Organizing the CSS structure for a project by creating a module of CSS for each component or page can sometimes present challenges. Take a look at the code snippet below: .navbar { display: flex; justify-content: flex-start; align-items: center; pa ...

cssreactjsnext.jsfrontendcss-modules