The CSS3 Border-Radius feature is showing some color bleeding on a border that is colored differently

I designed a dynamic-width container with rounded edges using border-radius, along with a bold border on one side of the container in a different color.

Everything looks fine when the browser window is small, but as I expand the window size, I notice the color bleeding through the center of my container.

Does anyone have any suggestions for fixing this issue?

The container has two classes:

.info-box {border: 1px solid #CCC; margin-bottom: 15px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background: #F3F3F3;}

.seller-msg {border-left: 7px solid #EF831B;}

It appears that the height of the container may also be contributing to the issue somehow.

Screenshot

bordercss

Answer №1

Wow, it seems like you have stumbled upon a challenging WebKit bug.

The only workaround I can suggest is to insert an additional <div> (reminds me of dealing with IE6 all over again) within the .seller-msg element and apply the thin grey border to that inner <div>.

Hopefully someone will find a more efficient solution soon.

If you wish to report the bug to the WebKit team, you can follow the instructions provided here:

  • Report Bug to WebKit Team

I have downloaded the latest nightly build (r106067 on Mac OS X as of now), and unfortunately, the bug persists:

I also performed a search on Bugzilla using keywords “border-radius color,” but could not locate any relevant bugs matching this issue.

  • Bugzilla Search Results

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

Include a flexible div in the hero section and change the position when resizing the screen

Looking to achieve a specific layout with only two resolutions in mind (767px minimum and maximum). For screens larger than 767px, display two divs side by side: one with text on the left and the other with an image on the right. The text remains in a fi ...

htmlcssbootstrap-4

"Struggling with a Bootstrap problem in my Accordion Table

I'm working with a Bootstrap table that includes an accordion feature. My goal is to have the second row hidden by default. However, when I click to reveal it, the table shifts. How can I smoothly animate the opening without causing any shifting? ...

jquerycssbootstrap-5bootstrap-tablebootstrap-accordion

Create a custom overlay for an image that is centered horizontally and does not have a fixed width

I'm working with this HTML setup: <div class="container"> <img class="image" /> <div class="overlay"> <div class="insides">more content here</div> </div> &l ...

javascripthtmlcssimageoverlay

Customize your Bootstrap 4 navbar to align on the right with a button that remains visible on mobile devices

I'm working on setting up a navbar with three elements. I want to have a left-aligned brand, a group of right-aligned links that will collapse on smaller screens, and an additional button that stays visible at all times. To achieve the alignment of t ...

htmlcssbootstrap-4

The icons in webviews on mobile apps (iOS and Android) fail to render correctly

My font icons are behaving inconsistently on webkit-based mobile browsers when used on mobile devices. When hovering over the span on a desktop browser, the icon properly fills its container: https://i.sstatic.net/qzrmz.png However, when hovering over t ...

htmlcsswebviewuiwebviewandroid-webview

Tips on increasing the width of the 'select' option once the user decides to make a selection

Here's a question for you: I have a <select> box where I set the width to 120px: <select style="width: 120px"> <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option> <option>ABC</option> < ...

javascriptjquerycsshtml-selectcontent-length

What could be causing the malfunction of the Google Maps iframe, preventing it from displaying the location properly

I am having trouble with this Google Maps iframe, it doesn't seem to display the location properly. Why is that? <iframe src="https://www.google.com/maps/place/18%C2%B045'14.7%22N+98%C2%B059'44.0%22E/@18.7540995,98.9933669,17z/data=!3m1! ...

javascriptjquerycssasp.net

There are no elements displayed beneath the div

If you're short on time, let me explain my point with an image: Here is the HTML code I am working with: <div align="center"> <div class="img-container"> <div class="myconatiner"> <h2>Headline< ...

csshtml

From Table to DIV: A Simple Conversion

I have encountered a major issue that has stumped me so far. Perhaps you can assist me. I am dealing with a table that appears as follows: __________________________________ | | time1 | time2 | time3 | +--------+-------+-------+-------+ | John | ...

javascriptphpjquerycss

The resizing issue of Textarea during transitions

Whenever I add the transition property to a textarea, it automatically affects the resizing function of the textarea. Is it possible to disable the transition only when resizing the textarea, but not for the textarea itself? <textarea name="" id="" cla ...

javascriptjqueryhtmlcss

utilizing a dynamic value within CSS modules for class naming

Struggling to incorporate a variable into a CSS module class name in Next.js. Finding it challenging to determine the correct syntax. The variable is fetched from the API: const type = red Here's how I'm attempting to achieve it: <div clas ...

cssreactjsnext.jscss-modulesreact-css-modules

What is the best way to ensure a flex element occupies a greater space within another flex element using TailwindCSS?

After spending hours trying different solutions and even resorting to brute force, I am still struggling to make this work. Objective: To increase the width of the cards when the screen size is larger Below is my main component: function App() { const ...

cssreactjsflexboxtailwind-css

Looking to implement a CSS effect that will hide content without removing the space it occupies on the page?

Is there a way to hide specific buttons within the right column of a 3-column table display? I am currently utilizing jQuery to achieve this function. The purpose behind hiding these buttons is to prevent any quick clicks that might interfere with the fa ...

javascriptjqueryhtmlcsshide

Height of the Accordion List

I have a code snippet below for an accordion list that I put together. I initially set the height for all the heading boxes to be uniform, but it seems like box A is displaying larger than the others. Can you help me figure out what went wrong? Any suggest ...

javascripthtmlcssaccordion

Tips for correctly aligning input text boxes

https://i.sstatic.net/9fVwA.jpg I have created a code for an average calculator using HTML, CSS, Bootstrap, and JavaScript. The problem I am facing is with the alignment of the input text boxes. How can I adjust them properly? The user should enter the ...

htmlcssbootstrap-5

Stop the image transformation/transition when the back face is not visible

Experience the magic of a box that flips with just a click. Inside, an image awaits to zoom in upon hovering. Check out this sample. The only glitch is that the zoom transition on the hidden image appears for a brief moment when I move my mouse out or ba ...

csscss-transitions

Video with a personalized play button overlay

I'm currently facing an issue with adding text above a GIF on a video play button specifically for mobile devices. The custom play button is necessary because no mobile device supports video autoplay. I've tried various methods to display the tex ...

htmlcssvideotext

Positioning Images in Tailwind Modals

I'm currently working on building a modal using Tailwind in Vue, but I've run into some challenges with aligning the elements inside the modal as desired. I've experimented with removing certain Tailwind classes and have tried implementing ...

javascripthtmlcssvue.js

Tips for positioning your side navigation menu parallel to the page edge

Im looking to have the side navigation floated to the left as I scroll down the page. I tried using the sticky property, but it didn't work out. Here's a snippet of the code: .sticky-class { position: sticky; top: 30px; } This is how my HTML ...

cssangular

CSS stylized horizontal navigation bar completed

* { border: 0px; margin: 0px; padding: 0px; } body { background-color: #FFC; } #wrapper { width:70%; margin: 0% auto; } #header { background-color: #C1D1FD; padding: 3%; } #nav { clear:both; padding: auto; position:inherit; background-color:#F0D5AA; wid ...

htmlcss