What is the reason behind the issue where max-height disrupts border-radius?

My inline svg is styled with the following CSS:

.img {
    border-radius: 15px;
    overflow: hidden;
    max-width: 70vw;
    margin-top: 6vh;
    max-height: 50vh;
    z-index: -1;
    text-align: center;
}

Everything seems to work as expected, except for the border radius. Strangely, it only works when the screen width is at or below 837px. The issue appears to be related to the max height property, because once I remove it, the border radius works fine at all sizes. Is there a solution to this problem? Any assistance would be greatly appreciated. If you require additional files (such as the SVG code or HTML), please don't hesitate to ask. Thank you in advance.

Edit: Based on a request, I have included the full HTML+CSS.

https://codepen.io/Angersmash/pen/xxgVMgP

htmlcss

Answer №1

The issue lies in the disparity between the width and height of the svg element, even though the original house image is square. The .img settings are configured with a maximum width of 70vw and a maximum height of 50vh.

To highlight the problem more clearly, setting the border to solid reveals that the border exists with rounded corners, but it extends beyond the boundaries of the house horizontally.

https://i.sstatic.net/M19EN.png

If we adjust the max-width of the .img element to match the max-height, the border aligns correctly, resulting in rounded corners. Below is the updated snippet implementing this adjustment:

https://i.sstatic.net/xG66L.png

<!DOCTYPE html>
<html lang="ru">
...
...
</script>
</body>
</html>

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

Is there a way to retrieve the list element that was added after the HTML was generated?

How can I reference a list element added using the append function in jQuery within my onclick function? See my code snippet below: $(function() { let $movies = $('#showList') let $m = $('#show') $.ajax({ method: 'GET ...

javascripthtmljquery

Show HTML code inside a text box

I have a text box that I populate with data from a Json response like this: <div class="gadget-body" style="height:100px"> <label>{{ textData}}</label> </div> Now, the Json response contains HTML code with <p> and < ...

htmlcss

How to display umlauts (åäö) using Verdana font in Internet Explorer versions 8 and 9

Encountering a strange issue on certain pages where the rendering of umlauts (åäö) appears incorrect in IE8 and IE9 at times. The encoding is utf-8 (and most of the site functions correctly, so I know it's correct). I have attempted to isolate the ...

htmlinternet-explorer-8fontsinternet-explorer-9

Increased pixels being incorporated into my line spacing

Looking for a solution: A <div> containing only one word at a font size of 16px with a line-height set to 1. Encountering issues with extra space above the text in Chrome and Firefox, while the text bleeds slightly out of the bottom. IE exacerbates t ...

css

Positioning pictures in front of a backdrop

I'm facing an issue with a section that slides into view with a blue background. I want to add a picture in the upper left corner, but it's barely visible and the blue background disappears. Here's a snippet of the HTML code: <header id ...

jqueryhtmlcss

Angular Material Spinner with Custom Image Icons - (mat-spinner)

I have successfully implemented the mat-spinner in my project with configurable changes like color and mode of spinning. However, I am now looking to add an image icon, specifically the logo of a brand or company, inside the spinner. How can I achieve this ...

cssangularangular-material2

Is there a way to create a duplicate form without any pre-filled text when clicking the "next" button using JavaScript?

This form contains the details that I would like to display on the page again when clicking the "Add Another Module" button. <div> <form class="in-line" id="module_info"></form> <div style="display: flex;"> < ...

javascripthtml

Tips for updating JS and CSS links for static site deployment

As I develop my static site using HTML files served from a simple web server, I want to use local, non-minified versions of Javascript code and CSS files. However, when it comes time to deploy the site, I would like to refer to minified versions of these s ...

javascripthtmlcssclient-sidestatic-html

Arranging items to be flush at the base of several columns

I need help with positioning buttons at the bottom of three columns of text. I want them to be aligned vertically on the page when the columns are side-by-side, and then placed after each column when viewed in a single-column layout on small screens. The c ...

htmlcsspositioningmultiple-columns

Cross-Browser Compatibility of CSS

I have noticed that lists styled with the following CSS code appear differently in Internet Explorer 8 and Firefox 4. In IE8, the rounded corners are missing, while FF4 does not change color when hovering over it. Which browser should I trust for accurate ...

cssbrowser

Firefox inexplicably splits words in haphazard locations

Although I know about this question, the solution provided doesn't seem to work for me Firefox word-break breaks short words at random points Despite applying the recommended CSS property as shown in the screenshot, it appears that the latest versio ...

cssfirefox

How can you modify the color of a card in React by mapping through an array and evaluating its value?

I'm attempting to modify the color of a card depending on the current slot value, which is an object in an array. While I am iterating through each card, I want to adjust the background color of the card based on this value. However, my current method ...

javascriptcssreactjsmeteormaterial-ui

Can you explain the significance of xs, md, and lg within the CSS Flexbox framework?

Currently in the process of developing an application using React and looking to apply some styles to my components. I stumbled upon which delves into a fluid grid system. A snippet from the example is shown below: <Row> <Col xs={12} sm={3} m ...

cssreactjsflexboxreact-flexbox-grid

What is the best way to include 2 or more radio buttons in every row of data within a table?

Is it possible to have multiple radio buttons for each row of data in a table? The current code snippet is as follows: echo '<table> <tr> <td>Home</td> <td>Not Home</td> <td>Address</td> <td>Su ...

phphtmlmysql

Utilizing CSS to create a repeating background image within a specified container

I'm currently working on setting up a container with a background image that repeats only when the contained div elements are long enough. However, I seem to be encountering issues getting the image to repeat properly within the #container code. This ...

csscontainers

Is there a way to simplify this "stopwatch" even more?

Looking for advice on simplifying my JS stopwatch timer that currently only activates once and keeps running indefinitely. As a newcomer to JS, this is the best solution I could come up with: let time = 0 let activated = 0 function changePic() { if(a ...

javascripthtmlcss

Reorder elements in CSS Grid

I've been working with a css-grid and it's almost there, but I'm stuck on reordering the items in a specific way. Currently, the html layout is set as “1, 2, 3, 4,…10”, but for smaller screens, I want the visual order to be “1, 2, 4 ...

javascripthtmlcssgridcss-grid

Certain javascript files have had illegal characters mistakenly added to them

There seems to be an issue with the js files or server on certain pages, as they are not loading in Firefox: with firefox: SyntaxError: illegal character 癡爠浥湵楤猠㵛≶敲瑩捡汭敮產崻 ⽅湴敲⁩搨猩映啌敮畳Ⱐ獥灡牡瑥 ...

javajavascripthtmltomcatstruts2

Is there a way to ensure consistent heights for various elements within a column, even if their heights are

Currently, I am utilizing the flex property to create uniform columns and vh to ensure they have the same height. This setup is functioning properly, but within each column, there could be a varying number of items. I am interested in having the elements w ...

htmlcssflexbox

The -webkit-box-reflect effect vanishes during the transition

I need help with this issue: The image loses its reflection during the transition until it returns at the end. Any suggestions are appreciated! Thank you! .specials-box { width: 330px; margin: 50px 0; height: 500px; position: relative; ...

htmlcssreflectiontransition