Webkit browsers do not properly clip content with rounded corners when using position:relative

Question

Webkit browsers do not properly clip content with rounded corners when using position:relative

In webkit browsers like Chrome, rounded corners do not properly cut off content when using position:relative;

Here is the HTML:

<div class="outer">
    <div class="inner">
    </div>
<div>

And here is the CSS:

.outer {
    background:yellow;
  border:solid 1px black;
    position:relative;/* When set, rounded corners fail to contain content */
    overflow:hidden;

   -moz-border-radius: 12px;
    border-radius: 12px;   
}
.inner {
    background:red;
    height:50px;
}

If anyone knows of a solution, please share. Thank you!

html css webkit rounded-corners

Answer 1

Answer №1

span.outer{
    position:relative;
}

div.outer {
    background:yellow;
    border:solid 1px black;    
    overflow:hidden;    
    -moz-border-radius: 12px;
    border-radius: 12px;   
}

.inner {
    background:red;
    height:50px;
}

<span class="outer">
    <div class="outer">
        <div class="inner">
        </div>
    </div>
</span>

Original JSFiddle: http://jsfiddle.net/USd5s/

I dislike adding extra DOM elements, but a simple wrapper can easily solve this issue. Feel free to use any element or CSS approach of your preference, I personally like using span and specific CSS styling. Alternatively, a div with class="wrap" would also work effectively.

Answer 2

span.outer{
    position:relative;
}

div.outer {
    background:yellow;
    border:solid 1px black;    
    overflow:hidden;    
    -moz-border-radius: 12px;
    border-radius: 12px;   
}

.inner {
    background:red;
    height:50px;
}

<span class="outer">
    <div class="outer">
        <div class="inner">
        </div>
    </div>
</span>

Original JSFiddle: http://jsfiddle.net/USd5s/

I dislike adding extra DOM elements, but a simple wrapper can easily solve this issue. Feel free to use any element or CSS approach of your preference, I personally like using span and specific CSS styling. Alternatively, a div with class="wrap" would also work effectively.

Answer 3

Answer №2

If you want to make it appear in three dimensions, you can use the following code:

-webkit-transform: translateZ(0);   
-moz-transform: translateZ(0);   
transform: translateZ(0);

Answer 4

If you want to make it appear in three dimensions, you can use the following code:

-webkit-transform: translateZ(0);   
-moz-transform: translateZ(0);   
transform: translateZ(0);

Answer 5

Answer №3

To achieve the desired effect, ensure that the inner border radius matches that of the outer border.

.inner {
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
}

Also, remember to cater to the webkit users as well! :]

Answer 6

To achieve the desired effect, ensure that the inner border radius matches that of the outer border.

.inner {
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
}

Also, remember to cater to the webkit users as well! :]

Answer 7

Answer №4

In a recent project, I encountered a similar issue that I was able to resolve with a simple adjustment to the CSS code.

Instead of specifying position as relative, I changed it to inherit:

.box {
    background: yellow;
    border: solid 1px black;
    position: inherit;
    overflow: hidden;
    border-radius: 12px;   
}

By making this change, the problem was resolved efficiently and effectively.

Answer 8

In a recent project, I encountered a similar issue that I was able to resolve with a simple adjustment to the CSS code.

Instead of specifying position as relative, I changed it to inherit:

.box {
    background: yellow;
    border: solid 1px black;
    position: inherit;
    overflow: hidden;
    border-radius: 12px;   
}

By making this change, the problem was resolved efficiently and effectively.

Answer 9

Answer №5

If you want to make the inner div look more appealing, you can apply the same border-radius as the outer div: https://example.com

<div class="outer">
    <div class="inner">
    </div>
<div>

<style type="text/css>
.outer {
    background:blue;
    border:dashed 1px gray;
    position:absolute;/* This will prevent content from being obscured by rounded corners */
    overflow:hidden;

    -webkit-border-radius: 15px;
    border-radius: 15px;   
}
.inner {
    background:green;
    height:60px;
    -webkit-border-radius: 15px;
    border-radius: 15px;   
}
</style>

Answer 10

If you want to make the inner div look more appealing, you can apply the same border-radius as the outer div: https://example.com

<div class="outer">
    <div class="inner">
    </div>
<div>

<style type="text/css>
.outer {
    background:blue;
    border:dashed 1px gray;
    position:absolute;/* This will prevent content from being obscured by rounded corners */
    overflow:hidden;

    -webkit-border-radius: 15px;
    border-radius: 15px;   
}
.inner {
    background:green;
    height:60px;
    -webkit-border-radius: 15px;
    border-radius: 15px;   
}
</style>

Answer 11

Answer №6

From what I recall, there was a suggestion to attach the container to another object in order to address this issue. While I can't say for certain, that could be worth considering.

Answer 12

From what I recall, there was a suggestion to attach the container to another object in order to address this issue. While I can't say for certain, that could be worth considering.

Answer 13

Answer №7

Paul mentioned a glitch in webkit, but don't worry - there's a workaround by adjusting margins on the inner div.

Answer 14

Paul mentioned a glitch in webkit, but don't worry - there's a workaround by adjusting margins on the inner div.

Answer 15

Answer №8

To achieve the desired effect for .inner, consider using the following CSS:

.inner {
    background: blue;
    height: 60px;
    position: absolute;
    top: 3px;
    left: 15px;
    right: 15px;
    bottom: 3px;
}

Adjust the values of bottom and top to ensure the correct height is achieved. Without modifications, the class would only be one pixel in height. This approach will effectively set the margins at the border radius, preventing anything from touching the edges.

Another option is to create an image with transparent space inside (as shown in the checkered area), surrounded by a solid color matching the background around .outer. Use border images or absolute positioning to place it in the corners, setting a high z-index. As you scroll, the filled part of the corner will conceal any content underneath.

Answer 16

To achieve the desired effect for .inner, consider using the following CSS:

.inner {
    background: blue;
    height: 60px;
    position: absolute;
    top: 3px;
    left: 15px;
    right: 15px;
    bottom: 3px;
}

Adjust the values of bottom and top to ensure the correct height is achieved. Without modifications, the class would only be one pixel in height. This approach will effectively set the margins at the border radius, preventing anything from touching the edges.

Another option is to create an image with transparent space inside (as shown in the checkered area), surrounded by a solid color matching the background around .outer. Use border images or absolute positioning to place it in the corners, setting a high z-index. As you scroll, the filled part of the corner will conceal any content underneath.

Answer 17

Answer №9

Check out this link for the solution to your issue.

#wrapper {
    margin-top:250px;
    width: 300px; 
    height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

Answer 18

Check out this link for the solution to your issue.

#wrapper {
    margin-top:250px;
    width: 300px; 
    height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

Webkit browsers do not properly clip content with rounded corners when using position:relative

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Customize Appearance: Overlay Images with Display Properties

Can a stroke in an SVG image be created using a gradient color?

Ways to prevent styles from being overridden by those specified in JavaScript

What could be causing the flexbox code to not take effect and the text to refuse wrapping?

Is <form> tag causing code deletion after an ajax request?

Leveraging Flexbox and flexGrow in conjunction with Textfield

Ensuring the accuracy of checkboxes in a loop through verification

Creating a CSS template for organizing sidebar and footer divisions on a webpage

Adding classes to a div in a sequential animation using jQuery: A step-by-step guide

Integrating a Find Pano functionality into a Kolor Panotour

dynamic text overlay on a bootstrap carousel

Is there a way to toggle the visibility of the angular material toolbar at regular intervals?

Saving the name and corresponding value of a selected option element into separate fields using Angular framework

having difficulty adjusting the background color of a div that is positioned absolutely

discovering the category for the .click function

Obtain textNames and colorNames data from a locally stored nested JSON file

Tips on preventing the constant shifting of my webpage div elements when resizing the browser

Displaying the Indian Rupee symbol in PHP

Issue with Flask form submission in a specific scenario but functioning correctly in a different context

Conquering Bootstrap 3's Image Gallery Customizations