Curved edges optimized for Safari and Chrome browsers

After exhausting all recommendations to fix the rounded corners problem, I am seeking help. The issue is that it displays correctly on Firefox but not on Safari or Chrome. Below is my code:

#sidebar4_content{
    margin: 0 auto;
    float: right;
    width:80%;
    background-color: #F2F2F2;
    margin-top: 130px;
    height: 600px;
    border: solid 5px #1C1C1C;
    border-top-left-radius:90%;
    border-bottom-left-radius:90%;
    -moz-border-radius-bottomleft: 90%;
    -moz-border-radius-topleft: 90%;
    -webkit-border-top-left-radius: 90%;
    -webkit-border-bottom-left-radius: 90%;
}

Trying various combinations like using "px" instead of "%" and adjusting the format to border-radius: 0px 90px 90px 0px; as well as adding comments as suggested by some, has not yielded any results. The strange part is that the corners are indeed rounded in Safari and Chrome but at a fixed size of 10px on all sides, despite specifying different values. I appreciate any assistance!

cssgoogle-chromesafarirounded-corners

Answer №1

After testing the code on my end in Chrome and pasting it directly into jsfiddle, everything appears to be functioning correctly:

http://jsfiddle.net/RqUYp/

Upon inspecting the element in Chrome, the expected rules are being applied:

-webkit-border-top-left-radius: 90%;/* Saf3+, Chrome*/
-webkit-border-bottom-left-radius: 90%;/* Saf3+, Chrome*/

Could it be possible that there is conflicting CSS causing issues? Have you checked the element using inspect element?

Answer №2

Have you double-checked for any conflicts in your CSS code? In my experience, adjusting the CSS in both Firefox and Chrome yields the same result. ( live example )

One way to test this is by adding the !important tag to specific properties to see if it resolves the issue. If it does, there might be another CSS rule overriding the one you have shared. In that case, you should inspect the elements using Chrome's dev tools to identify the conflicting styles.

For example:

#sidebar4_content{
margin: 0 auto;
float: right;
width:80%;
background-color: #F2F2F2;
margin-top: 130px;
height: 600px;
border: solid 5px #1C1C1C;
border-top-left-radius:90% !important;/*Opera 10.5, IE 9*/
border-bottom-left-radius:90% !important;/*Opera 10.5, IE 9*/
-moz-border-radius-bottomleft: 90% !important; /*Disabled for FF1+*/
-moz-border-radius-topleft: 90% !important;/*Disabled for FF1+*/
-webkit-border-top-left-radius: 90% !important;/* Saf3+, Chrome*/
-webkit-border-bottom-left-radius: 90% !important;/* Saf3+, Chrome*/
}

Answer №3

My experience with this has been smooth on both Chrome and Safari. Have you considered setting the remaining two corners to 0?

-webkit-border-bottom-right-radius: 0;/* Saf3+, Chrome*/
-webkit-border-top-right-radius: 0;/* Saf3+, Chrome*/

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

Displaying information collected from a submission form

I am in the process of designing a cheerful birthday card and I need to transfer data from a form to the birthday card page. How can I take information from the first div (which contains the form) and display that data in the second div? <!DOCTYPE ...

javascripthtmlcss

The box-shadow feature seems to be disabled or ineffective when trying to send HTML content via

I am having a unique approach to sending emails using html. To combat the issue of image blocking by email providers, I have resorted to utilizing box-shadow to create the images I require. The strange thing is that it appears perfectly fine in the browser ...

htmlcsshtml-email

Ways to insert a div element into the HTML display utilizing JavaScript

There's a method I'd like to use to dynamically add a div to the view using JavaScript. I attempted hiding the div on page load and then showing it through JavaScript. However, what ends up happening is that the div content appears briefly on l ...

javascripthtmljquerycss

What is the best way to center a heading element within a section on a webpage?

I need assistance aligning the h1 element with the specific class wish to the center of its section, both horizontally and vertically. Unfortunately, I have been unable to achieve this thus far. Any guidance would be greatly appreciated. Below you will fi ...

javascripthtmlcss

Expanding a list of object arrays through iteration: A step-by-step guide

// Initializing with one object let posi_val=[{top: '3px', left: '2px'}]; // Adding another object in the loop for (let i = 1; i < n; i++) { posi_val.push({ top: `${posi_val[i - 1].top.slice(0, -2) * 2}px`, l ...

javascripthtmlcssarrays

Applying Media Queries Based on Element Height

Situation: In my scenario, there is an image with two buttons below it, all of which share the same width. Issue: When the viewport is too wide horizontally, the buttons are not visible without scrolling down. This poses a challenge for tablets and small ...

javascriptjqueryhtmlcssmedia-queries

Iterating through records with a set of three columns in every row

I need to divide each row into 3 columns image : https://i.sstatic.net/4phtb.jpg <div id="list-product"> <div class="row"> @foreach($products as $product) <div class="col-lg-4 ...

phphtmlcsslaravelbootstrap-4

The issue persists with IE8 reverting to Quirks mode despite having the DOCTYPE specified

Whenever I try to load my site in IE8, it keeps reverting back to Quirks Mode and the page looks all distorted. I can manually switch it to IE8 document mode via developer tools and it works fine, but I'm puzzled as to why it keeps switching back to Q ...

htmlcssinternet-explorer-8quirks-modeie8-browser-mode

Attempting to remove an attribute or property in JavaScript will not yield the desired result

When I try to close the menu after opening it, the inline style won't get removed despite trying different methods. The CSS only has text properties for alignment and the class can-transform contains a media query. That's all the information I h ...

javascriptcssfunctiontoggleinline-styles

Fading effect of Bootstrap JS on reducing content size

My quest for a toggle collapse button led me to this helpful link: https://getbootstrap.com/docs/4.0/components/collapse/ I found what I needed, but encountered an issue with the transition; clicking on the button immediately reveals my div. I desire a slo ...

javascripthtmljquerycssbootstrap-4

The text element does not line up with the icons

As I'm working on creating my first account page header, I've run into an issue with some of the icons not aligning perfectly with the text. While advanced developers may find this task simple, as a beginner, I could really use some advice on how ...

htmlcss

Adding a see-through Bootstrap Navbar to a Fullpage.js website: A step-by-step guide

I am trying to incorporate a transparent Bootstrap Navbar into my page that is using fullpage.js. The desired outcome is for the navbar to stay on top of the page without affecting the layout of the website content. I have referenced an example here, but ...

javascripthtmlcssbootstrap-4fullpage.js

Using Selenium with proxies in Chrome or PhantomJS allows you to automate web browsing tasks while

I've attempted to utilize proxies in Chrome, however I encountered this error. driver = webdriver.Chrome(proxy=proxy) TypeError: __init__() got an unexpected keyword argument 'proxy' The code I am trying to work with only functions pro ...

pythonpython-2.7google-chromepython-3.xselenium

Is there a way to ensure that spans are inline with a div?

My structure is pretty straightforward: <div></div><span></span><span></span> However, I'm looking to have them all appear on a single line. Currently, they are rendering like this: <div /> <span />&l ...

csshtml

What is the best way to implement a front-end CSS style for text instead of a background style?

I have HTML text I want to style with a color like rgba(0,0,0,0.1), but I want the color to appear above or on top of the text, not below or behind it. Issue: How can I accomplish this? (CSS or JavaScript solutions are welcome). Thank you in advance for ...

javascripthtmlcss

Text not aligned with Line Height

I'm currently working on centering two spans horizontally within a 150px div. My initial thought was to set the line-height of each span to 150px, but for some reason, the text isn't aligning properly using this approach. Below is the code I hav ...

csshtml

Not every situation calls for the same type of styling

I am struggling to override the CSS for <h1> and <h2> using specific selectors only. The changes are only being applied to one class, with <h1> changing color to green but not <h2>. Can someone please assist me in identifying where ...

css

Is there a way to override the padding of a container?

Working with Wordpress for the first time has been quite a challenge. Adjusting to everything is causing me some major headaches. So, I've got this container div and added a lazy 10px padding. However, for the theme I'm attempting to develop, I ...

csshtmlpadding

Learn the art of animating "basic jQuery filtering" exclusively with CSS

Does anyone have suggestions on how to animate elements when filtered by JavaScript? The code I've tried so far doesn't seem to be working. Here's what I currently have: http://jsfiddle.net/ejkim2000/J7TF4/ $("#ourHolder").css("animation", ...

javascriptcsssortinganimationfiltering

Guide to adjusting the number of bounces using jQuery's User Interface (UI)

Check out my code on CodePen: http://codepen.io/Chiz/pen/jbwPLO (click anywhere in the blank area) I'm trying to figure out how to adjust the number of bounces a div makes before stopping. For example, I want the div to bounce 10 times and also chang ...

jqueryhtmlcssjquery-animate