Understanding the percentages of CSS in relation to other elements

Can you define a CSS dimension in a percentage relative to an element other than its parent? Specifically, I want the border-radius of a div to be 10% of its width. However, using border-radius: 10% creates an elliptical border when the height and width of the div are different. Is there a way to set all border radii to be equal to 5% of the div's width?

Answer №1

Using only CSS alone won't achieve this, however with the help of JavaScript/jQuery it can be easily done.

$('#firstitem').css('border-radius',$('#secondelement').width()/10+'px');

Here is a sample implementation.

Answer №2

One option is to define a specific dimension in pixels.

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 Angular Material Tree component is not rendering properly in an Angular tutorial demonstration

Upon completing the installation of @angular/material, @angular/cdk, and @angular/animations through npm install --save, I attempted to reconstruct the flat tree example provided by Angular. Unfortunately, even after addressing the error message stating Co ...

Guidelines for creating a uniform table border with varying border thicknesses

I have created a crossword puzzle generator that arranges words by rows and fills each cell with one letter. The keywords are distinguished by a wider border and a gray background, as shown in this image. Here is the general structure of my code: #cross ...

Tips for achieving uniform spacing between three buttons in a horizontal alignment using bootstrap 3

Is there a way to make buttons enclosed in a <div> with class="row" and each button having class="span4" only as wide as the text it contains, centered at 25%, 50%, and 75% of the width of the screen? [aaa] [bbb] [ccc] not [ aaa ][ bbb ][ ccc ] ...

Keep table header stationary while accommodating varying column widths

I have come across various solutions for freezing a table header row, such as creating a separate table containing only the header and hiding the header of the main table. However, these solutions are limited to cases where column widths are predetermine ...

Designing personalized sass components

Seeking advice on developing a custom CSS unit that can be utilized in Sass with Node.js. Is there a tutorial available for creating a Sass plugin specifically for this purpose? For instance, I am looking to establish a unit called "dpx" which functions as ...

Is there a way to center the text at 0% using text-align in Bootstrap?

My progress bar, designed with Bootstrap, currently displays the text in a way that is not centered as desired. The issue I am experiencing is that the "0/0" text shifts to the left and using text-align: center; does not seem to resolve this alignment pro ...

The child fieldset is oversized with a height of 100%

I am attempting to make a fieldset child stretch to 100%, but the child (ul) is too large and causing overflow (getting cut off in my scenario). Is there a way to stretch the fieldset child to 100% without causing overflow? fieldset { height: 300px; ...

Using CSS transform to enhance Flash content

I am currently working on a web application that is contained within an iframe. The iframe has been scaled using -webkit-transform:scale(0.8), which is functioning well. However, I am encountering an issue with the flash audio recorder within the iframe no ...

Changing colors using JavaScript: A step-by-step guide

Hey there! I'm looking to change the color code in this script from $("#Tcounter").css("color","black") which uses the color word "black", to "#317D29". Can someone help me figure out how to do this? <script type="text/javascript"> $(document). ...

The CSS on the maps infobox is not rendering properly when an icon is clicked

Hey everyone, I'm in the process of creating a travel blog on WordPress and have encountered some issues with the CSS on my site. I've included maps and tables that look fine in my fiddle, but when I transfer them to my website, they appear disto ...

The same bootstrap column code shows varying behavior

This week, I delved into learning HTML with the goal of creating my own website using bootstrap. However, I encountered a perplexing error - code that should display two pieces of text on the same line is behaving inconsistently for seemingly identical sni ...

Next JS Event Listener Failing to Detect Scroll Events

Currently, I am attempting to change the state and display a shadow in the navigation bar when the user scrolls, but for some reason it is not detecting the event. I am working with nextJS 13 and tailwind css. const [shadow, setShadow] = useState(false) ...

The search bar is visible on desktop screens and can be expanded on mobile devices

Check out my code snippet below. <style> #searchformfix { width: 50%; border-right: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5; position: relative; background: #fff; height: 40px; display: inline-block; border: ...

Creating a blur effect on an image tag when hovering using CSS and HTML

I am currently developing a Portal website for one of my classes, and the template provided by my professor utilizes the <picture> tag to adjust images depending on the browser's size. My goal is to add a blur effect and darken the image while d ...

Ways to showcase tooltip text for an unordered list item?

When creating an unordered list, each element's text corresponds to a chapter name. I also want to include the description of each chapter as tooltip text. The Javascript code I currently have for generating a list item is: var list_item = document.c ...

Can a YouTube video be triggered to play when a specific CSS style is selected?

I am searching for a method to display and play different YouTube videos based on a selected CSS style from a drop-down menu. I believe JavaScript can be utilized to detect the chosen CSS. Include the following in the html header of the page. <script ...

Switch the background color of the body when hovering over a link

Is it possible to change the page background when hovering over a a using only CSS? I am searching for a solution that does not involve any JavaScript. I understand that we can access child elements with CSS, but I am unsure if it is possible to target th ...

Different floating divisions that are tightly packed adjacent to each other

I'm dealing with dynamically created divs that have variable content, all following the same CSS rules. My goal is to organize them into 2 columns without any space in between. I attempted to use float: left/right, but there still remains space at the ...

Is it possible for me to create a hyperlink that directs to a javascript function?

Here is the code I am currently using: <input class="button" type="button" value="Mark" onClick="doCheck('mark');" \> However, I would like to replace the button with a hyperlink using the <a> tag. Is it possible to achieve ...

Mixing two elements for a continuous animation without the use of JavaScript

I'm interested in creating an animation that cycles between "0% interest free credit" and "free delivery". I am attempting to achieve this without the use of JavaScript, but so far I can only make the first element fade away without the second one fad ...