border-radius is a CSS3 property used for giving certain HTML elements rounded corners. The border-radius property is supported in IE9+, Firefox, Chrome, Safari, and Opera
4
votes
1answer
809 views
Image with border radius + border color not working on Chrome/Safari iOS
I'm trying to work out why an image with a circle border radius and a white border color isn't working on Chrome/Safari on iOS. It works on my desktop.
Here is a screenshot of what it looks like, ...
4
votes
1answer
355 views
css position, border radius, overflow not respected in webkit - other solutions?
So I have a fake little iOS 5 style switch I built using the technique where you use a smaller div as a viewport and a larger div as the content visible through that viewport. It totally failed in ...
3
votes
1answer
138 views
Safari breaks border radius using Google maps in a div
First question on Stack for me
I've done my homework and found something like this topic
In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?
...
google-maps-api-3
3
votes
1answer
104 views
Overflow hidden not working during CSS rotate animation
I have a parent div with a border-radius of 50% and the overflow is set to hidden. Within is a child div, which is animated. As long as the rotation property of the child div is not animated, ...
3
votes
1answer
303 views
Google Chrome position:fixed border-radius overflow:hidden issue
I am having issues with Google Chrome while using border-radius on a position:fixed element with overflow:hidden. The overflow attribute does not seem to be working. When you hover over the navigation ...
2
votes
1answer
132 views
Transparent rounded border in Safari
When using an alpha transparency border with rounded corners in Safari, the background clips into the border. This happens even when using background-clip: padding-box. I know that I can simply wrap ...
2
votes
1answer
208 views
Border-radius css rendering in PDF with RazorEngine
I've built circles using css border-radius:50%, within an html page.
However, when I pass it to the programmer and he exports to PDF through RazorEngine the circles rendering is really bad. Have any ...
2
votes
1answer
1k views
CSS border-radius issue in Safari 6
I can't post a new image because I'm a new user, and I can't send a link to my code because our network is protected.
I want to create a box with the top left and top right corners rounded. My CSS:
...
2
votes
1answer
306 views
get computed border radius in opera
I'm trying to get computed border-radius state of some element with this code:
function _elementCurrentStyle(element, styleName){
if (element.currentStyle){
var i = 0, temp = "", ...
2
votes
0answers
68 views
Child element not fitting perfectly over a parent with border radius and border style applied
As you can see in the screenshot, when there is a border radius and border style applied to the parent element,and the child element sits "above" the parent via "position:absolute" it seems that some ...
2
votes
0answers
611 views
Webkit Border Radius Animation Clipping
I'm animating open a lightbox (nothing special or crazy) and am having border-radius problems in Chrome, Opera and Safari. All other browsers (including mobile ones I've tested) work just fine. ...
1
vote
0answers
127 views
border radius ugly rendering on Android 4.0.3
I'm developing a simple app with Cordova/PhoneGap and using FontAwesome (and border-radius) to display some social media icons. I made the build via cordova android build on the CLI.
The social media ...
1
vote
0answers
31 views
Border-image, border-radius
Im having trouble with a div with rounded corners and border image. The border image stays square and the div has rounded corners. What i need is the image border to work with the rounded corners from ...
1
vote
0answers
35 views
Weird issue of iframe and border radius in firefox
I faced a very weird issue of iframe and border radius in firefox.
Corners of button with border-radius we getting squared after over lapping on iframe.
jsfiddle as both demo of issue as well as ...
1
vote
0answers
425 views
Internet Explorer 11 blur background-image with border-radius
i've a div with border-radius and a background-image, this is displayed well in all browsers except in Internet Explorer 11, where, the background-image appears blurred.
How i can fix this problem?
...
internet-explorer-11
1
vote
0answers
95 views
Fixed background breaks overflow hidden of border radius on inner elements on Safari 7
I want to position several elements inside a round div with a border-radius and overflow: hidden, in front of a fixed background :
<html><head>
<style>
.background {
...
1
vote
0answers
1k views
Search form (Bootstrap 3) behaving strangely in IE
I have a search form with Bootstrap 3 that looks and works perfectly in Chrome and Firefox, but two of the corners are behaving strangely in Internet Explorer and I can't figure out why. I basically ...
1
vote
0answers
116 views
css border-radius renders diffrently in desktop (chrome) and android
I want to implement the following pie chart on a phonegap application:
http://codepen.io/anon/pen/betEm
But, on the Android browser (phonegap) the chart is rendered like this:
Similar issue ...
1
vote
0answers
71 views
content stepping over border when doing a CSS translate
I have a circle div with border-radius 4px thick and overflow hidden. There are two elements inside.
When I move the elements inside it using a CSS transform they step over the border of the parent ...
1
vote
0answers
150 views
In Plone 4.1.4, using Carousel, border-radius css not persistent in Safari
Basically, I would like to have rounded corners on the Carousel on the Home page of a new Plone site. So, in custom.css, I have added the class found from Firebug:
.carousel-banners{
...
1
vote
0answers
951 views
Using Twitter bootstrap's img-circle class in IE8
I am working on a project using the twitter's bootstraps css framework. I need to make it work in IE8. The one class am having trouble with is img-circle. Since the border-radius doesn't work in IE8, ...
1
vote
0answers
201 views
Safari Border-Radius Issues
I'm getting some strange behaviour on Safari with border-radius effecting borders of various elements.
Borders disappear and strange artifacts appear
Also getting weird double borders, but only ...
1
vote
0answers
578 views
Border with border-radius specified refusing to print in Opera?
I'm not certain if this is something I'm doing wrong or if it's just a bug in the way Opera handles printing, but here's my problem:
I print reports for my company that are written in PHP and ...
0
votes
0answers
15 views
Browser bug while css border-radius and zoom?
If I create a box with a border-radius and fixed height and width with an image, I see an outline, if I use the browser zoom (http://s7.directupload.net/images/140716/sofxu85b.png).
<style ...
0
votes
0answers
88 views
Mobile : Elements in overflow scroll element ignore border radius
My problem has to do with how mobile browsers seem to be ignoring the border radius attribute when inside a div with overflow:scroll. Below is an example of the problem in a jsfiddle that needs to be ...
0
votes
0answers
27 views
Apply border-radius and a gradient on IE7-8
I need to apply border-radius on a div containing a gradient.
AND I need it to work with the 7 & 8 IE versions.
I tried a few things and problems appear on a few different points.
Check the ...
0
votes
0answers
54 views
how to hover circle shape element to display text message
I would like to show a text message on hover the circles 1 to 5.
What is happening right now is that I can hover the text area region but it's shape is squared and it goes outside the circle.
If I ...
0
votes
0answers
13 views
Positioned element appears outside of container on hover in Safari
I'm trying to make my own circular transition hover effect from scratch. I tried this before using a slightly different technique and it was Chrome acting up. I fixed it so now it works perfectly in ...
0
votes
0answers
84 views
gulp-compass: undefined mixin border-radius
I am using gulp with gulp-compass.
Trying to use border-radius mixin, I get:
Error: erros tatis/css/styleguide.scss (Line 5: undefined mixin 'border-raius')
Following my gulp task
...
0
votes
0answers
13 views
Using border-radius in IE9 on input buttons
I have found that my div's are using the border-radius property but my input submit buttons are not. I am assuming this is something specific to do with the buttons themselves but I'm not sure what I ...
0
votes
0answers
33 views
Border radius with images in Internet explorer 8
I have an image and I would like to show it using a border radius like in this example.
CSS:
.rounded {
width:100px;
height:100px;
display:inline-block;
border-radius:50px;
}
This ...
0
votes
0answers
68 views
CSS3PIE - Border-Radius Not working on <button>s in IE7/8
CSS3PIE works for all other elements on my site from <div>s to <img>s but I cannot for the life of me get it to work on <button> elements.
I've tried some usual hacks to get things ...
0
votes
0answers
14 views
Glitchy top-right and top-left borders in mozilla
I have a little css animation of a lock opening that plays on hover. The haft of the lock is nice and smooth in chrome but has strange cutouts in firefox.
Check out the animation jsFiddle here,
and ...
0
votes
0answers
94 views
Safari, WebKit browsers not running overflow hidden
Why is it that Safari 5.1 doesn't apply overflow hidden, and curve borders? And is there a workaround?
I have a div on top of a div and I want to curve the edges and hide the overflow. With WebKit ...
0
votes
0answers
26 views
yui3 dial - border radius not working
I am trying to add a dial using YUI3 to a div.It works fine when I add to one of the parent divs which has no styling attached to it but the dial becomes rectangular with border radius zero when I add ...
0
votes
0answers
476 views
Use IE filter with css3 box-shadow, and border-radius
I'm trying to get a project in IE9 to look more like it does in Firefox/Chrome, unfortunately I designed it using text-shadow, box-shadow, and border-radius.
I can use box-shadow and border-radius in ...
0
votes
0answers
93 views
Android Gingerbread seems to remove border radius on input field when focused
I am building an app and I need to support Gingerbread. When logging in, we have a border-radius-right on our input fields that disappears when the element is in the focused. Does there have to be ...
0
votes
0answers
76 views
Rounded corners with CSS Pie on images?
We have this site - http://www.playforce.co.uk/product-category/role-play-and-den-making/
We've applied border-radius to the majority of elements which works fine in IE8. We're using CSS Pie to round ...
0
votes
0answers
98 views
jQuery fadeIn() causes border-radius to disappear on parent element
I'm using a bit of jquery to fadeIn() and fadeOut() a child div on .hover of the parent element. It works, but gets rid of the border-radius on the parent element. This happens specifically in Chrome ...
0
votes
0answers
81 views
Border-radius is not working in internet explorer
I am trying to develop a web site exactly like this , but it shows square boxes in IE , but works very well in firefox and chrome. I would like to make the corners rounded as see in firefox and ...
0
votes
0answers
90 views
Chrome doesn't hide overflow for object with border-radius and backface-visibility:hidden
I want to do a 3D card flip, but on a circle. So I create an element with
border-radius: 50%
backface-visibility:hidden.
Everything works fine in firefox (22), but not in chrome (27.0.1453.116 ...
0
votes
0answers
302 views
Images inside a circle div overflow it's borders in Opera and Safari
I am trying to make circle divs with image links inside, the images are half the opacity and when hovered over they turn to full opacity (I'm doing that using jQuery). They work exactly how I want ...
0
votes
0answers
137 views
Circles with border-radius
We're making an artsy menu for a blog. One of the things we wanted was make icons for each project in the menu containing a photo and an overlay color and we wanted them to be circles. So I was ...
0
votes
0answers
113 views
Feature Detection for working elliptical border radius
I am writing a small page that uses elliptical border radius, which works inconsistently across browsers (of course) and sometimes interacts badly with other things (namely, old Safari, old Firefox ...
0
votes
0answers
280 views
image rounded corner
I have a div containing an image. I want this div with rounded corners.
The problem is the image inside the div is bigger than the div and i use overflow:hidden to cut the image because with jquery i ...
0
votes
0answers
377 views
css3pie select border-radius
I am attempting to use CSS3PIE to round the edges of a select element. I am using the below code and running in IE7. The behaviour I get looks as though there are two rounded nodules in the bottom ...
0
votes
0answers
192 views
Internet Explorer 9 Border radius and Layout Difference
I've been working on a new website, everything was fine until I check the website with laptop which has 1366x768 res.
Actually I've checked the site before with my PC with various resolutions and ...
0
votes
0answers
137 views
CSS border radius will contain inner elements unless position is added
I have noticed a problem with CSS3 rounded corners. They contain inner elements perfectly but when the container has a position:relative applied to it they no longer contain elements. I have set up 2 ...
0
votes
0answers
255 views
CSS border-radius with IE9 not working on my webserver
I'm new with CSS, and tried to create a menu like the following: http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html
To do so, I followed the tutorial located a tutplus.com: ...
-2
votes
0answers
18 views
Chrome: white rounded borders glitch
JSFiddle
.rounded{
width: 100px;
height: 20px;
padding: 10px;
border: solid 1px #fff;
border-radius: 10px
}
.rounded:hover{
border-color: #333;
}
At first glance you may ...
Related Tags
css × 79
css3 × 45
html × 25
safari × 15
overflow × 12
google-chrome × 11
border × 10
jquery × 7
css3pie × 6
javascript × 6
webkit × 6
image × 5
android × 5
opera × 4
html5 × 4
firefox × 4
opacity × 3
css-position × 3
rounded-corners × 3
overlap × 2
more related tags
Hot Network Questions
- How can wiring systems be designed to not rely solely on colour?
- Find min of 3 numbers hardcoded
- How to add the total count of a field to the legend?
- why are the category of pointed sets and the category of sets and partial functions "essentially the same"?
- How are anti-aircraft missiles tested?
- How to ask for feedback from research students on my supervision abilities?
- Sharp pods under airliner wings
- What are differences between affine space and vector space?
- Can long range WiFi work if one end of the connection is not using a high gain antenna?
- Numerically solving Helmholtz equation in 2D for arbitrary shapes
- Speed of sound in gases medium
- Books for biology,popular but rigorous?
- How can I put some comment in yum installation list?
- How can I gain better insight into ISP-managed equipment (routers)?
- How to transform a normal random variable such that I can simulate normal samples between the range of 1 and 45?
- A word for saying things indirectly because you do not know the correct word
- Energon: is it possible?
- Is Evelyn viable somewhere else than in the jungle?
- How do you 'make oxygen' on Mars?
- Meaning of "Mr Right's first name is Always"
- Why would using head/tail instead of pattern matching make evaluation terminate?
- Packing for week of backpacking in the rain
- Debugging Apex Code using Checkpoints?
- Who owned my shares before me?
