Troubleshooting border-radius problem with Firefox-CSS for the pseudo-element "before"

I'm encountering an issue with a card-element in bootstrap-4 that has a front and back side. When hovered over, the back side is displayed. To achieve a "folded corner effect," I'm using a pseudo-element(:before) on the front of the card. This method works well in most browsers, but Firefox seems to have trouble rendering it.

The problem arises when trying to round the bottom-left corner of the pseudo-element. Despite setting a border-radius, Firefox displays a strange box instead of a rounded corner.

I've tried adjusting various CSS properties such as positioning, z-index, and overflow, but haven't been able to identify the root cause of the issue in Firefox.

Any suggestions or insights into what might be causing this behavior specifically in Firefox would be greatly appreciated!

https://jsfiddle.net/rbv5ob20/

HTML:

.card {
  color: white;
  border: transparent;
  border-radius: 10px;
  -webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
  box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}

.front,
.back {
  width: 100%;
  height: 150px;
  background: #99d0e9;
  opacity: 1;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 10px 0px 10px 10px;
}

.front {
  position: absolute;
  left: 0;
  z-index: 1;
  opacity: 1;
  text-align: left;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.front::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  border-width: 0px 25px 25px 0px;
  border-style: solid;
  border-color: transparent #f6f6f6 #32a2d4 transparent;
  border-bottom-left-radius: 10px;
}

.back {
  background: #32a2d4;
  opacity: 1;
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  text-align: right;
  border-top-right-radius: 10px;
  display: block;
}

.card:hover .back {
  -webkit-transform: rotateY(0);
  -ms-transform: rotateY(0);
  transform: rotateY(0);
}

.card:hover .front {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
<section id="offering" style="background-color:#f6f6f6;">
  <div class="container">

    <div class="col-4 text-center">

      <div class="card">
        <div class="front">
          this is front...
        </div>
        <div class="back">
          this is back
        </div>
      </div>

    </div>
  </div>
</section>

cssdebuggingfirefoxbootstrap-4pseudo-element

Answer №1

If you're using Firefox, you may notice that the border-radius property doesn't always work correctly on elements with a width and height of 0. One workaround for this issue is to create a wrapper element with overflow: hidden and apply the border-radius to that wrapper instead:

.roundArrow {
  border-radius: 0 0 0 10px;
  width: 50px;
  height: 50px;
  overflow: hidden;
}

.roundArrow:after {
  content: "";
  display: block;
  top: 0px;
  right: 0px;
  border-width: 0px 50px 50px 0px;
  border-style: solid;
  border-color: transparent #f6f6f6 #32a2d4 transparent;
}
<div class="roundArrow"></div>

Answer №2

<!DOCTYPE html>
<html lang="en">
<head>
  
  <style>
      .card {
color: white;
border: transparent;
border-radius: 10px ;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}

.front, .back {
width: 100%;
height:150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}

.front {
position: absolute;
left: 0;
z-index: 1;
opacity:1;
text-align:left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}

.front::before {
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      border-bottom-left-radius: 10px;
      height: 25px;
      width: 25px;
      background: #32a2d4;
}

.front::after {
    content: "";
    position: absolute;
    top: -11px;
    right: -15px;
    height: 25px;
    width: 35px;
    background: white;
    transform: rotate(40deg);
}

.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align:right;
border-top-right-radius: 10px;
display: block;
}

.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}

.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
  </style>
</head>
<body>
      <section id="offering" style="background-color:#f6f6f6;">
            <div class="container">
        
                    <div class="col-4 text-center"> 
        
                        <div class="card">
                            <div class="front">
                                this is front...
                            </div>
                            <div class="back">
                                this is back
                            </div>                      
                        </div>
        
                    </div>      
            </div>
        </section>
</body>
</html>

Here are some adjustments you can make to the ::before pseudo-element, and don't forget to include the ::after pseudo-element for this solution.

.front::before {
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      border-bottom-left-radius: 10px;
      height: 25px;
      width: 25px;
      background: #32a2d4;
}

.front::after {
    content: "";
    position: absolute;
    top: -11px;
    right: -15px;
    height: 25px;
    width: 35px;
    background: white;
    transform: rotate(40deg);
}

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

Can PHP be used to dynamically load a different stylesheet on a webpage?

Currently in the process of developing a mobile version of my website, I have determined that implementing an alternate stylesheet would be the most effective method to ensure compatibility with mobile devices. I am considering using a PHP script for use ...

phpcssmobilestylesheetalternate

Personalized Bootstrap 4 navigation bar tailored specifically for the application process

Seeking a customized progress nav-bar for my application, with a design similar to this: https://i.sstatic.net/ahDBa.png Discovered it on this website. Despite using the provided HTML and CSS, I'm unable to make it work with Bootstrap 4. HTML < ...

htmlcssbootstrap-4navnav-pills

Is it necessary to use block elements when specifying image dimensions in HTML?

I have encountered a unique scenario where I want to set a pre-determined height for an HTML img element before it finishes loading. This is crucial because this height will be utilized in a calculation that may occur before the image is completely loaded, ...

htmlcss

Using Angular 2 alongside Twitter Bootstrap

What is the recommended approach for integrating the Twitter Bootstrap library with Angular 2 framework? There are typically two main methods: Begin by structuring the HTML using Bootstrap containers and then embed Angular components within these contain ...

htmlcsstwitter-bootstrapangular

What is the best way to adjust the height and width of a div when it comes into view through scrolling?

How can I automatically and frequently change the size of my div when it is scrolled into view? HTML <div id="contact" class="fadeInBlock"> <div class="map"> <div class="pointer"> <div class="dot"></div& ...

javascriptjqueryhtmlcss

IE6 disrupts stored layouts

I've encountered a strange issue with my design in IE6. It loads perfectly at first, but after reloading it a couple of times, everything suddenly collapses. The strange part is that when I upload an updated version, it fixes the issue, only to break ...

htmlcsslayoutinternet-explorer-6

Is my website broken due to Internet Explorer?

The progress on my current website project has been smooth so far, but I'm encountering an issue when testing it in Internet Explorer. Whenever I try to view it in IE, the layout breaks completely. You can check it out at . I've attempted using C ...

htmlcssinternet-explorercross-browsergoogle-chrome-frame

Customizing Sass Bootstrap Variables for Tailored Responsive Designs (Specifically for Mobile or Desktop)

Currently, I am in the process of working on a website that has opted for the adaptive approach, using separate mobile and desktop templates instead of responsive design. Despite this choice, Bootstrap is still being utilized on these templates, loading al ...

csstwitter-bootstrapsassbootstrap-sass

using javascript to target a specific css selector attribute

I have a CSS file with the following code: .datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4; font-size: 16px ;font-weight: normal; } Is there a way to use JavaScript to dynamically change the font size? The code below worked ...

javascriptcss

What is the reason border-box does not function properly on inline-block elements?

Demo: http://jsfiddle.net/L5jchnpm/ I've encountered an issue where I believed that using display: inline-block would make elements act as both inline and block elements. Additionally, I thought that setting box-sizing: border-box would adjust the w ...

htmlcss

Switch image upon hover within a sprite

I have a sprite that I utilize for displaying various images. Currently, my aim is to change the sprite image upon hovering using solely CSS. .sprE { background-color: transparent; background-image: url(/i/fW.png); background-repeat: no-repeat; height: 30 ...

jquerycss

Center the text vertically within a card using Vuetify styling

I am seeking a way to vertically align text within a card using Vuetify or traditional CSS in a Vue project. Here is my code: <template> <div> <v-container class="my-5"> <v-row justify="space-between"> <v- ...

javascriptcssvue.jsfrontendvuetify.js

Tips for adjusting UI size in CSS based on viewport dimensions and accommodating image content

https://i.sstatic.net/DMU5s.jpg The elements E1, E2, E3, E4 are all part of the user interface (UI) and are intended to have a hover effect. Additionally, there is a background image included in the design. Currently, this is the progress made on the pro ...

htmlcss

Should elements be concealed with CSS if they cannot be eliminated with php?

There are times when I struggle to deactivate a function or elements in PHP, particularly in PHP frameworks and CMSs. As a workaround, I often utilize display: none. However, I am concerned about potential issues this may cause in the future. Should I co ...

phpcss

The simplest way to increase the size of a child element in order to generate a scrollable area

When working with HTML, it's important to consider how the size of a child div affects the parent div. If the child div is larger than its parent, scrollbars will appear on the parent div if the appropriate style rules are set. However, I'm inte ...

javascripthtmlcssresizescroll

What is the process for implementing a unique Angular theme across all components?

I created a unique Angular theme called 'my-theme.scss' and added it to the angular.json file. While it works with most Angular Elements, I am facing issues getting it to apply to certain HTML Elements inside Angular Components. For example: < ...

cssangularscss-mixinscustom-theme

How can I align an input to the right using Bootstrap?

I found an example of a navbar that I liked and decided to copy it. Here is the code snippet: <div class="container"> <h3>Nawigacja zamknieta w kontenerze</h3> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> < ...

csstwitter-bootstrap

Achieving full opacity text within a semi-transparent div: a simple guide

Within my div, I have an a tag. I applied opacity:0.5 to the div, causing the text inside to also appear at 0.5 opacity. I am looking for a way to have the text display with opacity:1 inside my div that has an overall opacity of 0.5, without resorting to ...

cssopacity

What are the steps to install gecko driver and firefox on the docker image apache/airflow:2.1.4?

Currently, I am attempting to utilize Selenium within one of my tasks in Airflow. Airflow is currently running on the docker image apache/airflow:2.1.4. However, an issue arises when using Selenium in my Airflow task due to the absence of Firefox, resulti ...

dockerseleniumselenium-webdriverfirefoxairflow

Is there a way to eliminate the black dots appearing on the right side of the navigation items within my bootstrap 5 navbar?

I'm currently using a bootstrap 5 navbar and everything seems to be functioning correctly, except for one issue - all the nav-items have a black dot on the right side of the text. Below is the code snippet for that particular section. I've made ...

htmlcssbootstrap-5