Fixing the Issue of Transparent Rounded Corners in CSS3

You can find the website at this address: CLICK HERE TO VISIT THE SITE

Below is an image displaying the issue at hand:

By utilizing CSS3 properties like border-radius and background: transparent, I was able to create what appears to be a "cutout" effect on the div. However, it's evident that the corners are also transparent.

While using an image would easily solve this problem, my intention is to rely solely on CSS3 for this design. I believe there must be a clever solution out there that I haven't considered yet. It's worth mentioning that I am leveraging css3pie.com to enable CSS3 functionality on older versions of Internet Explorer, from IE6 through IE8.

htmlxhtmlcss

Answer №1

This solution may seem a bit unconventional

These guidelines specifically pertain to the use of the p tag

-webkit-box-shadow: #A3AFC7 0px -4px 0px 3px;

Answer №2

I found success using the developer tools in Google Chrome...

For div.middle_bg, I adjusted the height to 85px and then applied a background to the p element nested within.

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

Unable to add texture graphics to the box element in an A-Frame simple environment

Currently, I am experimenting with the demonstration of a Basic Scene in A-Frame. However, when I reach the section about Applying Image Texture and Using Asset Management System, I encounter an issue where the suggested texture does not display as expect ...

htmlfirefoxthree.jsaframe

Personalizing the User Interface of Azure AD B2C using dynamic HTML

After customizing my own html and CSS for Azure AD B2C sign-up and sign-in policy using the steps outlined in this resource, I have successfully created custom Sign-Up and Sign-In pages. However, my next goal is to make the sign-up page dynamic by passing ...

htmlcssazureazure-ad-b2c

Storing values from a content script into textboxes using a button press: a simple guide

I am new to creating chrome extensions and currently utilizing a content script to fetch values. However, I am facing difficulty in loading these values into the popup.html. Here is the code snippet: popup.html <head> <script src ...

javascripthtmljsongoogle-chrome-extension

The video element in HTML5 is not showing up on Safari browsers, but it is functioning properly on Chrome

I have set up a video slider on my webpage. You can view the site The code is functioning perfectly on Chrome and iOS Safari, but there seems to be an issue on desktop browsers. When inspecting the page in Safari, the video elements are present in the HTM ...

javascriptcsssafarihtml5-video

Is there a way to display the division symbol using PHP?

I have come across this question multiple times, but am yet to find a satisfactory resolution. Is there a way to output the division sign (÷) using PHP? Every time I attempt to echo it, the output is just showing a strange symbol . ...

phphtml

What is the best way to retrieve data using two multi-select filters?

I'm trying to incorporate open street map in order to display the locations of complaint objects, and filter them with a select option that contains a complaint status. Complaints also have types that I want to include as an additional filter. I am st ...

javascripthtmlangulartypescriptfilter

Changing the Color of Disabled Angular Material Buttons

<button _ngcontent-pse-c676="" mat-icon-button="" class="mat-focus-indicator setting_button mat-icon-button mat-button-base ng-star-inserted mat-button-disabled" ng-reflect-disabled="true" disabled="true" ...

cssangular-materialmaterial-design

Prevent scrolling in TypeScript once a specific property becomes true

I have a hamburger icon located in my header section. When this icon is clicked, I want to prevent scrolling on the page because the hamburger moves as the user scrolls. My initial attempt was to set the hamburger icon to position: fixed. However, this ca ...

htmlangulartypescript

What is the solution for correcting skewed div content?

Currently, I am applying a transformation to a <div> element using the value of skewX(-18deg). However, I am facing an issue where inserting text into it causes overflow. The content inside the skewed container is reverted back to its original state ...

javascriptjqueryhtmlcss

Is there a way to open a link in a new window without using the _blank attribute?

I am facing an issue where I have a webpage with a URL linking to a PHP file that displays an image, and I want to open this picture in a new window without the blank page showing up. Currently, when I click on the URL using the code below, a new window o ...

javascriptjqueryhtmlcss

jQuery Failing to Work

I'm experimenting with creating a falling effect for a DIV element when a piece of text is hovered over. The original effect can be seen here. var $dropDiv = $('#dropDiv'); $('#holder p').on('hover', function () { // ...

javascriptjqueryhtmlcss

Page Transition Malfunction

Hey there, Just wanted to check in and see how you're doing. I've been working on my Cargo portfolio, and it's almost ready to go. However, I've run into a small issue. Every time I try to navigate between pages, I keep experiencing ...

htmlcsstransition

Expanding and collapsing DIV elements using JavaScript upon clicking navigation menu items

At present, the current code unfolds the DIVs whenever a user clicks on a menu item. This results in the DIV folding and unfolding the same number of times if clicked repeatedly on the same link, without staying closed. My desired functionality is to have ...

javascriptjqueryhtmlcss

What could be causing the spinner to remain open even after the API has finished executing on my UI?

I am facing an issue with displaying a spinner while waiting for my API to complete. When I click the onSave button, the spinner appears as expected. However, even after the API call is completed, the spinner remains visible. How can I make sure the spin ...

htmlcssangularangular-material

Tips for creating a wide mobile menu

I am attempting to make the mobile menu full width, but so far my efforts have been unsuccessful. #menu-main-2 { background-color:#FFFFFF !important; padding-left:15px; max-width: unset; width: 100%; } view mobile menu ...

csswordpress

Display the input text on the page and output it as well

Is it possible to have a text input on a website where users can type text and have it immediately display on the page, similar to Twitter? I am aware of alert windows and prompt windows but I am looking for something different. I hope this can be achieve ...

javascriptjqueryhtmlcss

Preserving the most recent choice made in a dropdown menu

Just started with angular and facing an issue saving the select option tag - the language is saved successfully, but the select option always displays English by default even if I select Arabic. The page refreshes and goes back to English. Any assistance o ...

javascripthtmlangulartypescript

Using CSS to Put Text in the Back of Other Text

After being inspired by the structure of view-source:, I attempted to layer one instance of text behind another using z-index. However, my initial attempt failed as it became clear that utilizing z-index required the position attribute to work effectively. ...

csspositionz-index

What is the best way to create a timer using JavaScript?

I'm looking for a reverse timer to track session timeout. I found a code on codepen that works as a clockwise timer, but my attempts to make it counterclockwise have failed. Can someone please suggest a solution? I want the timeout to be either 1 hour ...

javascripthtmlcss

Is there an issue with this straightforward Javascript function for switching the CSS class of an HTML body?

I have been diligently working on this piece of code for a while now. I have carefully placed alerts to debug it and ensured that the flow is correct. The necessary styles are all in place. Initially, the body starts with the "styleBlack" class. When the ...

javascripthtmlcss