The content is unclipped with a border-radius and hidden overflow

As I work on incorporating stylistic text inside rounded divs, I encounter a challenge where the text touches the top of the container. While I have successfully managed to customize various content elements such as nested divs and background images, this particular issue has proven to be quite troublesome.

The traditional method of using image borders or cover-ups is not feasible due to our dynamic graphical backgrounds. What we need is a solution that can truly clip the text.

This problem is most noticeable in earlier versions of Chrome and Firefox 3.x.

If you'd like to experiment, here is the sample code:

http://jsfiddle.net/vfp3v/1/

div {
    -moz-border-radius: 45px;
    border-radius: 45px;
    background-color: #ccc;
    font-size: 100px;
    color: #777;
    line-height: 70%;
    overflow: hidden;
    width: 257px;
}

The glitch:

Note that this issue has been resolved in newer versions of Chrome and Firefox 4 - the relief:

Given that a majority of our site users are still on Firefox 3.6, it would be great to find an elegant solution for them as well. Any assistance would be greatly appreciated! Thanks

firefoxgoogle-chromeclippingcss

Answer №1

If you're looking for a solution that works in FF 3.6, check out this example: http://jsfiddle.net/vfp3v/15/

Although it does have some drawbacks - in the second example (in FF 3.6), the clipped off border has a solid color, which may not look great if you have a background. Take a look and see if it fits your needs.

I made a simple addition by adding a span:

<div><span></span>WXYZ</div>

Then I positioned it over the text with a border in the same color as the background, along with a displacement equal to the border size:

div{
    position:relative;
    etc...
}
span{ 
    position:absolute; display:block; width:100%; height:100%;
    border:25px solid #fff; top:-25px; left:-25px;
    -moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */       
}

Update: I tested this in Chrome 10.0.6 (which also has a clipping issue) and it worked there too!

In browsers that properly support border-radius, the span (and its border-color) won't be visible at all because it gets clipped off (overflow:hidden).

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

Tips for customizing bootstrap's fixed navbar-default to ensure that the list items align downwards:

Is it possible to customize the bootstrap fixed navbar-default so that the li elements align downward instead of at the top? If you have any corrections or custom solutions, I'd love to see them! Feel free to share your code on platforms like CodePen, ...

javascriptjqueryhtmlcsstwitter-bootstrap

The li elements within a 960.gs layout will not extend to fill the entire width of the

I am still learning about this and I have been following some tutorials online. I managed to make the columns work with paragraph tags, but when I use ul > li tags, the image takes up the entire space. I'm not sure what's causing this issue. Wha ...

htmlcssweb960.gs

Customizing the color of buttons in MUI 4

Currently, I am utilizing mui V4 for my styling and attempting to incorporate an additional color for my buttons. I understand that it only accepts these predefined colors: expected one of ["default", "inherit", "primary", "secondary"]. To achieve this, I ...

cssreactjsmaterial-ui

Unable to animate a second click using jQuery/CSS

I'm having an issue with animating on click using CSS. The animation works fine on the first click, but it doesn't work on the second click. This is because the click event is being overridden by jQuery to enable the dropdown menu to open onClick ...

javascriptjquerycssanimation

I am unable to determine if I have already selected a List Item

My goal is to have a functionality where clicking on "Download Drivers" will open the list, and clicking again will close it. This should be achieved with onclick events only, no hover effects. Additionally, I want the list to remain open even if I click o ...

javascripthtmlcss

What is the best way to ensure that an iframe adjusts its height to fit the content within a tabbed container?

Is there a way to dynamically set the height of an iframe to match the content inside it when clicking on a tabbed plane? Initially, I used a fixed height of 1000px. How can this be achieved? <div class="container-fluid text-center"> <div ...

javascriptjqueryhtmlcssweb

How can jQuery be used to display the size and type of linked files in title attributes?

For instance: Prior to <a target="_blank" href="http://www.adobe.com/devnet/acrobat/pdfs/reader_overview.pdf"> Adobe Reader JavaScript specification </a> As the file is in PDF format, the title should read title="PDF, 93KB, opens in a new ...

jquerycssxhtmlaccessibility

Make a diagonally slanted border for a cell

Is it feasible to create a table with diagonal borders using CSS or jQuery, similar to the one shown below? I would welcome any ideas on how this can be achieved. ...

jquerycsscellcss-tablesdiagonal

What is the process for extracting the background color from a typescript file in Angular and connecting it to my HTML document?

My typescript array population is not changing the background color of my div based on the values in the array. I've attempted to set the background using [style.backgroundColor]="statusColor[i]", where statusColor is an array declared in my typescrip ...

htmlcssangulartypescript

Is there a way to adjust the color of the checkbox?

After creating a show/hide toggle checkbox for a password input, I ran into an issue with changing the background color when it is checked. Our current code base includes a custom styled checkbox, but it lacks the ng-model needed for this particular featur ...

htmlcssinputcheckboxstyles

Incorporate text directly into Bootstrap select input on a single line

I am attempting to include an asterisk in a select input field. I can achieve this easily by applying my own CSS, but the challenge is to accomplish this using Bootstrap 3.3.7 or an older version while displaying the asterisk on the same line as shown in t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

My goal is to create a pulsating effect using CSS box-shadow through jQuery. Despite my best efforts, the code I attempted failed to produce the desired smooth pulse effect with box-shadow. The code snippet I experimented with: <div class="one"> &l ...

javascriptjqueryhtmlcss

The nth-child selector fails to function properly with a customized MUI component in CSS

I've created a styled component as shown below: const FormBox = styled(Box)(({ theme }) => ({ width: "47vw", height: "25vh", backgroundColor: theme.palette.grey[100], borderRadius: theme.shape.borderRadius, marginLeft: ...

javascriptcssreactjsmaterial-ui

4 products - all discounted by 25% - featuring stylish borders and margins

After extensively searching the internet, I have come across similar issues but not quite the same as mine. I have a list that I want to display in table form within a parent div taking up the entire width (100%). I aim to show 4 items per row and attempt ...

htmlcss

What is the best way to make a panel width adjust automatically to fit the screen width?

I have developed a React/Material UI application that includes a Portal which showcases a Panel and a Widget. Main App: Show Portal and Set Background Color to Blue export default function App() { return ( <div style={{ backgroundC ...

htmlcssreactjsflexboxmaterial-ui

The importance of precision in a written text

When it comes to being specific, I usually pride myself on my skills. However, there's one particular challenge that I can't seem to crack. Here's the scenario: Imagine you have a list structured like this: <ul class="dates"> < ...

csscss-selectorscss-specificity

Increase the font size of a div using CSS to make it appear larger

Utilizing a WYSIWYG-editor, I am creating content that I want to display with double font-size, without directly altering the HTML code. Here is an example of the HTML structure: <div id="contents"> <p style="text-align:center"> <spa ...

htmlcssfont-size

List on the Left Side with Scroll Capability

In my ASP.NET web application that targets .NET 3.5 and utilizes an AJAX asp:UpdatePanel, I have structured the page layout using multiple div elements to divide the vertical space into sections - header, first content, second content, third content, and f ...

htmlcsshtml-table

The Bootstrap Tooltip seems to be glued in place

Utilizing jQuery, I am dynamically generating a div that includes add and close buttons. Bootstrap tooltips are applied to these buttons for additional functionality. However, a problem arises where the tooltip for the first add button remains visible even ...

javascriptjqueryhtmlcsstwitter-bootstrap

Variations in the implementation of responsive web design on laptops versus mobile devices

Looking at the css code below: @media only screen and (min-width: 0px) and (max-width: 768px) { ... } I'm curious about why, on my laptop, when I resize the browser window to exactly 768px, the css properties inside this media query are applied. ...

androidhtmlcss