Chrome is having trouble displaying rounded borders

My experience with a jquery slideshow has been great overall, but there's one issue I'm encountering. For some reason, Google Chrome is not displaying round borders on the images "div" even though I've specified the CSS round border style specifically for Chrome. I understand that different browsers have their own ways of rendering round borders, so I've adjusted my settings to accommodate all possible browser variations. Despite this effort, Chrome still doesn't seem to be displaying the round borders as intended.

Instead of cluttering up this page with HTML and CSS details, I'll just provide you with the URL to the slideshow. Feel free to check out the source code if you're interested, the CSS link is in the head tag.

jquerygoogle-chromeslideshowcss

Answer №1

Apply the CSS styles directly to images instead of using the .slides_container class

Include these rules in your CSS stylesheet

img {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
}

Answer №2

To style your images with rounded corners, use the following code in your CSS

div.slides_control a img {border-radius: 12px;}

Answer №3

In the transition, it is evident that your sample has rounded corners. However, the <a> elements containing them are wider than the images themselves... To address this issue, consider making the <a> elements the same size as the images or, for a more straightforward solution, apply the border-radius directly to the <img> tags.

It's worth noting that Firefox and Chrome no longer support their vendor-prefixed versions of -moz-border-radius and -webkit-border-radius. For better compatibility, use standard border-radius instead.

Answer №4

This code snippet should do the trick:

#slides_control img {
   border-radius: 3px;
}

No need for browser prefixes, check out http://caniuse.com/#feat=border-radius for more information.

Answer №5

I am grateful to all of you for your efforts to assist me.

It appears that a Google Chrome bug is causing the overflow to not be hidden properly when using the border command specifically on a div element.

The workaround is to include the following in your style:

#slider{
    border-radius: 10px;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

Now, hopefully others facing a similar issue won't have to spend hours searching for a simple piece of code that can make all the difference.

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

Arranging HTML Lists in Perfect Order

I am working with an HTML list that contains links styled as background images rather than text. The container is 200px tall and I would like the links to be centered inline within the container. Usually, I would use line-height:200px; for text to achieve ...

htmlcsshtml-lists

Hiding elements in HTML with React when data is null

Is there a way to hide elements using classes like "d-none" when the data is null in React? <span className="product__tag">{prod.tag1}</span> <span className="product__tag">{prod.tag2}</span> <span classN ...

javascripthtmlcssreactjs

The use of Ajax in jQuery can sometimes result in the PHP isset function being unable to detect

I'm seeking assistance with my code. I am attempting to retrieve values and then send them to a PHP script via AJAX using jQuery. While I can extract the values, there appears to be an issue that I can't identify. Any help you can offer would be ...

phpjqueryajax

Is it possible to divide a column in an HTML table into two separate

I am currently working with an array of elements that I need to iterate over. For each element, I create a <td></td> tag. When dealing with 10 elements, it results in a table with one column and 10 rows. Is there a method, using either HTML o ...

javascripthtmlcss

Creating dynamic controls in edit template of KendoUI ListView at runtime

Linked to this inquiry, I am interested in replicating the same functionality within a ListView rather than a kendo Grid. My attempt can be viewed here. The editing template switches between different controls based on the initial model value during edit m ...

javascriptjquerykendo-uikendo-listview

Leveraging ruby/watir/page_object for testing a jQuery UI autocomplete feature (AJAX)

Currently, I am utilizing a combination of jRuby, watir-webdriver, and Page Object for conducting tests on a web application. Within the application, there exists a jquery autocomplete widget that yields responses from the backend database following an un ...

jqueryrubyajaxwatir-webdriverpage-object-gem

The functionality is not operating correctly on Internet Explorer

This code is functioning properly in Mozilla and Opera, but it is not working in IE. Any assistance on this issue would be greatly appreciated. The JavaScript is working fine, however, in IE 10 only the back panel is displayed. Thank you for your help. h ...

javascripthtmlcssweb

What is the process for inserting a custom image onto a button that redirects to a different website using HTML and CSS?

Looking to make a button that directs to a different website with a custom image. Would it be better to use the <input> tag or the <button> tag? Appreciate any insight! ...

htmlcssimagebutton

Using JQuery to target and style individual td elements within a database in a

Hey there! I'm currently in the process of learning jQuery and I've encountered a little issue with the code below: <table class="table table-bordered table-striped table-hover datatable"> <thead> <tr> & ...

javascriptjqueryhtmldatatable

Incorporate tinyMCE into a colorbox module

Currently, I am facing an issue on my website where there are textareas with tinymce. While I can view all the textareas correctly, when trying to open colorbox within a textarea, it does not inherit the tinymce properties. The code snippet used to open co ...

javascriptjquerytinymcecolorbox

a guide on retrieving FormData objects in PHP

Hey everyone, I have a question regarding a sample code snippet I posted here. In this code, I am successfully uploading a file using Ajax JQuery. However, I am struggling to figure out how to read the content of the uploaded file in my PHP code. Can anyon ...

phpjavascriptjquery

Change the label's class when the input area is selected

Looking to add a new class to a label when its corresponding input element is in focus. A form consists of 10 input fields and 10 labels, one for each field. const inputFields = document.querySelectorAll('.form-control'); console.log(inputFie ...

javascriptjqueryarrays

Manipulate DIV elements with jQuery by selecting them based on their class names and then

Is there a way to use jQuery to eliminate all DIVs on a webpage while preserving their content that have the following specific pattern? <div class="ExternalClass85AC900AB26A481DBDC8ADAE7A02F039">....</div> Please note that these DIVs adhere ...

jqueryhtml

Resize the image to fit the dimensions of a designated container

Wondering if anyone can assist with a website issue I've been having. My div-container is set to 280x310, but my images are larger than this size. I want to keep the aspect ratio of the images and have them fit the full height of the container, while ...

csshtmlimage

Can images be shown on a different PHP page?

My current project involves annotating images of vials with defects. I have organized these images into folders based on their batch numbers. Each folder is named according to its respective batch number. Once all the images are uploaded, I need to retriev ...

phphtmlcssmysql

Change the div element to a different div element as the window size is adjusted

Here is the HTML snippet I am dealing with: <div id="div_top"></div> <div id="div_bottom"></div> When viewing the website on a mobile device or resizing the window, I need div_bottom to appear before div_top. To achieve this, I h ...

jquerycsshtml

Proper Alignment of Multiple Elements Floating to the Right in a Menu

Although this question has been asked previously, I am facing challenges in getting it to work for my specific scenario. My objective is to showcase a menu bar with a search option and inline text to its left. However, when I attempt to float both elements ...

htmlcsstwitter-bootstrap

Table for Selecting Radio Buttons in Form Submission

When creating a table of radio buttons, each user can only choose one radio button per column. I assigned the same name to each column - for example: if there are 20 radios in each line, then each column is named b1, b2, b3, b4... b20. The selection is wor ...

phpjqueryradio-button

What is the best way to make multiple HTML tables sortable?

I recently implemented an open-source JavaScript table sorter in my project. You can find more information about it here: However, I encountered an issue where only the most recently added table on my page is sortable. When users press a button, new table ...

javascriptjqueryhtmlajax

Is there a way to confine a jquery script within the dimensions of the container div?

I have recently created a gallery with navigation buttons in jQuery. As a newcomer to jQuery, I wrote a small script that adjusts the margin of a div container by a fixed amount. The script is functioning properly, but it extends beyond the top and bottom ...

javascriptjqueryhtmlcss