Border Radius Problem

I'm having trouble getting a border radius to work as I want. Please keep in mind my pages are works in progress. The corner radii of the footer div do not fill correctly when I apply a 1px border around the container div. There's a tiny bit of page background color that bleeds through at the lower rounded corners. Look here:
http://www.kiefferfurniture.com/testcss.html
If I remove the border from the container div and add it to the footer div, then it does render correctly. Look here:
http://www.kiefferfurniture.com/testcss2.html
Applying the border to both causes the border to appear as 2px wide where the divs overlap, and that is no good. How do I get a 1px border around everything so it looks and renders correctly?

I'm not seeing a problem in FF12. But older browsers need proprietary code. Note the syntax difference for Mozilla (whacky).
Also, older IE doesn't support border-radius.
#footer {
background-color: #66A7C5;
margin-top: 0px;
border: 5px solid #284B4D; /**increased border width**/
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Similar Messages

Border-radius is not working in FireFox 4.06

I am a web developer working in HTML 4/HTML 5 and CSS 2.1 and CSS 3. If I use the following piece of code so that Firefox gives rounded corners to images and boxes, I get a validation error from W3C. The piece of code is as follows "-moz-border-radius:", but if on the other hand I change the code to "border-radius:" I get beautiful rounded corners in Opera, Safari and Internet Explorer 9 "beta" with no markup validation problems with W3C. Is there a way to rectify this problem in Firefox before the full software is made available across the globe?

This got fixed in Firefox 4.0 beta 7 (Gecko 2).
The vender prefix can be dropped now!

Border-radius is not clipping contained content

Hi All,
I'm having a problem where I've got an element styled with a border-radius and the nested content is 'popping out' through the round border. I've dug around the web a bit and a common solution is to place an 'overflow:hidden' tag on the containing element. That seems to work well in FF, but I can't get it to work in Safari.
Here's a sample of what I'm doing: http://www.c2-it.com/clients/test/test.html
You can see I've also tried adding position information to both the parent and child elements based on some other suggestions I've seen, but neither has helped. Since it seems to work in FF I'm assuming that I've just overlooked something simple. Can anyone point me in the right direction?
Thank You,
CJ

Hi Al,
I kind of figured that I could add the border-radius to the child element. The problem there is that when you have rounded borders within rounded borders it doesn't look exactly even because of the way the border is applied. Its more evident on larger areas, so it shouldn't really be visible in my situation. But I was hoping there was some easy fix for the webkit based browsers. FWIW, I believe I saw something that says the border-radius for the parent item should be 3x the difference in border-width of the parent item compared to the child item. I'll see if I can find that info again and repost.
As for using the moz and webkit prefixes, can you point to any reference material that shows which versions of those browsers still need the prefix? I'd definately like to jettison them if its only a real small percentage of the public still using those versions.
Thanks,
CJ
Al Sparber wrote:
This is a known Webkit issue. The solution is to assign border-radius to the top corners of the child element:
.sidebar1 h1 {
border-radius: 10px 10px 0px 0px;
By the way, unless you really have a need to support old versions of Firefox and Webkit, you only need to use the standard syntax of border-radius. The prefixed moz and webkit properties have not been necessary for quite some time.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998

I want to do a border-radius with box shadow and it doesn't work, why?

This should be simple but it's not working and I don't know why. I think the problem is in the html.
I simply want to have a div with an image inside that is circular and has an inset shadow and is centered on the page.
/*here is my css*/
#div3 {
-webkit-margin:25px auto;
-webkit-border-radius:50%;
.box-shad{
-webkit-box-shadow: 15px 15px 15px #8 inset;

<body>
<div class="gridContainer clearfix">
<div id="div3" class="fluid"><div class="box-shad"><a href="index.html"><img src="images/Big-tree-trans1.png" width="900" height="700" alt=""/></a></div>
</div>
</body>
Here is my website: www.adjacentdimensionsmedia.com

I want a different drop shadowed image on each page. Is there a way to do that?
Sure. Copy & paste the following code into a new, blank document.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Document</title>
<style>
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
img {
    max-width: 100%;
    vertical-align: baseline
body { background: #069 }
header, footer {
    clear: both;
    width: 100%;
    padding: 0 2%;
    background: #CCC;
    color: #000;
    min-height: 50px
article {
    clear: both;
    width: 75%;
    min-height: 600px;
    padding: 0 2%;
    background: #FFF;
    color: #069;
    margin: 0 auto;
.shadow img { box-shadow: 1px 3px 5px #333 }
.radius img {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
.border img { border: 20px solid #069 }
.center {
    text-align: center;
    margin: 0 auto
</style>
</head>
<body>
<header>Header</header>
<article> <h1>Main content area</h1>
<div class="shadow radius border center">

<img src="http://placehold.it/500x325.jpg"> </div>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<p> </p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</article>
<footer>Footer</footer>
</body>
</html>
Nancy O.

Css3 border radius

== Issue
==
I have another kind of problem with Firefox
== Description
==
I am using css3 to create rounded edges on an img in my html.
Safari renders border radius ok but Firefox needs image in CSS (background image)
here is the css
<code>/* only works in webkit */
#sample img{
-moz-border-radius:20px;
-webkit-border-radius: 20px;
border-radius: 20px;
width:220px;
height:220px;
/* works in webkit and gecko */
#colouredbox {
background-color: #fae93a;
-moz-border-radius:20px;
-webkit-border-radius: 20px;
border-radius: 20px;
width:220px;
height:220px;
/* works in webkit and gecko */
#imageviacss {
-moz-border-radius:20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background-image: url(220sample.jpg);
width:220px;
height:220px;
</code>
<br/> <br/>''(Edited by Moderator: placed code in a CODE block - c)''<br/> <br/>
== This happened
==
Every time Firefox opened
== i was trying it out :D
==
== Firefox version
==
3.6.4
== Operating system
==
Intel Mac OS X 10.6
== User Agent
==
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-GB; rv:1.9.2.4) Gecko/20100513 Firefox/3.6.4
== Plugins installed
==
*-Displays PDF documents in the browser.
*Gecko default plugin
*Runs Java applets using the latest installed versions of Java. For more information: Java Embedding Plugin. Run version test: Java Information.
*doubleTwist Web Plugin
*iPhoto6
*Unity Web Player lets you experience dazzling interactive 3D right in your browser. For more information, visit Unity .
*Allows webpages to support pressure-sensitive drawing on Wacom pen tablets.
*3.0.50106.0
*The Flip4Mac WMV Plugin allows you to view Windows Media content using QuickTime.
*Shockwave Flash 10.0 r45
*The QuickTime Plugin allows you to view a wide variety of multimedia content in web pages. For more information, visit the QuickTime Web site.

See:
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
https://developer.mozilla.org/en/CSS/-moz-border-radius
A good place to ask questions and advice about web development is at the MozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.
See http://forums.mozillazine.org/viewforum.php?f=25

Border radius & flash video player issue

Border radius & flash issue - PFA screenshot
http://72.29.76.194/~designs/firefox-flash-border-radius/border-radius-flash-firefox.png
When I overlay a div with a border radius over a flash object, the corners are being cut as much as the size of border box.
Firefox 23.0.1

[https://support.mozilla.org/en-US/questions/971344 Screenshot of the issue]

Border-Radius Not Working in IE11 - any SharePoint Constraints?

Hi all,
I can't get Border-Radius to render rounded corners on my Divs. Is this an IE 11 or SharePoint constraint I am facing? I am not in compatibility mode.
Thanks,
Kelly
Personal Blog: http://thebitsthatbyte.com

Kelly,
Try opening up Dev Tools (F12) and setting the browser mode to edge. Does this have any effect on the rendering of your CSS? If it does - you have an X-UA-Compatible tag in your master page and the value is set to IE8.
It's not recommended you remove this because it breaks some functionality on the authoring side. What you could do is replace that line with this:
<Sharepoint:SPSecurityTrimmedControl
runat="server"
Permissions="AddAndCustomizePages"><meta
http-equiv="X-UA-Compatible"
content="IE=8"/></SharePoint:SPSecurityTrimmedControl>
And it will show at the appropriate times I believe. You can read more about the control here:
http://www.markadrake.com/blog/2013/11/21/public-sharepoint-sites-and-ie8-compatibility/
If this doesn't work please let me know.

How do I center my background image and get a round border radius?


body {
background-color: rgba(30,30,30,1);
background-image: url('images/me_atsunsetbackground1.JPG');
background-repeat: no-repeat;
background-position: center;
background-border-radius: 100%;
position: fixed;
margin-top: 250px;

That doesn't surprise me, that code wasn't meant to be a direct replacement for yours, it's just there to illustrate an idea for Nancy.
The <body> tag itself should not be changed in that manner because the <body> holds ALL of your site's visual elements. If you were to change the <body> in the way you are attempting (which isn't possible), everything in your site would need to be within that oval.
If you just want an oval background image on the <body>, turn the image itself into an oval in Photoshop and outside the oval, either use the same color as the <body> background-color, or leave it transparent and save it as a .png with transparency.
Your inset shadow css is badly malformed...
1. The attribute "shadow" doesn't exist. You're looking for CSS3 box-shadow.
2. Safari and DW need the -webkit- prefix to display it (again, you need to test in more than one browser)
3. The settings need to be in the correct order: h-shadow, v-shadow, blur, spread, inset (something like box-shadow:10px 10px 5px 5px rgba(255, 255, 255, .5) inset;
Keep in mind, css3 settings (like rgba color settings and box-shadow in its entirety) don't work in IE8 and lower at all, and are pretty spotty in IE9.

Border radius not working in my web using firefox 18.0.2 using -moz or without

I'm using the code below for the menu of my web and it works perfect in Safari 5 and in my html editor Coda but the rounded corners are missing in Firefox 18.0.2 on my iMac, did tried several changes without success ¿can you help me please? The code:
<pre><nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple Menu In CSS3 Only</title>
<style type="text/css">
body {
background: #ddd;
margin: 30px;
#menu {
float: left;
padding: 0;
margin: 0;
/* Box Shadow */
box-shadow: 0 1px 0 #000;
-moz-box-shadow: 0 1px 0 #000;
-webkit-box-shadow: 0 1px 0 #000;
/* Rounded Corners */
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
/* Rounded Corners */
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
#menu ul {
border-top: #f3f3f3 1px solid;
padding: 0;
margin: 0;
float: left;
/* Background Gradient */
background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
#menu li {
float: left;
list-style: none;
background: none;
margin-right: 1px;
#menu a { outline: none; }
#menu li a:link, #menu li a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
display: block;
color: #262626;
padding: 12px 28px;
text-decoration: none;
text-transform: capitalize;
/* CSS3 Text Shadow */
text-shadow: 0px 1px 1px #fff;
/* CSS3 Background Gradient */
background-image: -moz-linear-gradient(top, #cacaca, #848484);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
#menu li a:hover {
cursor: pointer;
color: #fff;
text-shadow: 0px -1px 1px #000;
/* Background Gradient */
background-image: -moz-linear-gradient(top, #929292, #545454);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
#menu li:first-child a, #menu ul {
/* Rounded Corners */
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
#menu li:last-child a, #menu ul {
/* Rounded Corners */
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
a.active:link, a.active:active, a.active:visited {
color: #fff !important;
text-shadow: 0px -1px 1px #000!important;
background-image: -moz-linear-gradient(top, #444, #666)!important;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;
/* Box Shadow */
box-shadow: inset 0 0 10px #000;
-moz-box-shadow: inset 0 0 10px #000;
-webkit-box-shadow: inset 0 0 10px #000;
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a class="active" href="index.html">home</a></li>
<li><a href="menu.html">menu</a></li>
<li><a href="project.html">projects</a></li>
<li><a href="affiliates.html">affiliates</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</body>
</html></nowiki></pre>

The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple Menu In CSS3 Only</title>
<style type="text/css">
body {
background: #ddd;
margin: 30px;
#menu {
float: left;
padding: 0;
margin: 0;
/* Box Shadow */
box-shadow: 0 1px 0 #000;
-moz-box-shadow: 0 1px 0 #000;
-webkit-box-shadow: 0 1px 0 #000;
/* Rounded Corners */
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
/* Rounded Corners */
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
#menu ul {
border-top: #f3f3f3 1px solid;
padding: 0;
margin: 0;
float: left;
/* Background Gradient */
background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
#menu li {
float: left;
list-style: none;
background: none;
margin-right: 1px;
#menu a { outline: none; }
#menu li a:link, #menu li a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
display: block;
color: #262626;
padding: 12px 28px;
text-decoration: none;
text-transform: capitalize;
/* CSS3 Text Shadow */
text-shadow: 0px 1px 1px #fff;
/* CSS3 Background Gradient */
background-image: -moz-linear-gradient(top, #cacaca, #848484);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
#menu li a:hover {
cursor: pointer;
color: #fff;
text-shadow: 0px -1px 1px #000;
/* Background Gradient */
background-image: -moz-linear-gradient(top, #929292, #545454);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
#menu li:first-child a, #menu ul {
/* Rounded Corners */
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
#menu li:last-child a, #menu ul {
/* Rounded Corners */
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
a.active:link, a.active:active, a.active:visited {
color: #fff !important;
text-shadow: 0px -1px 1px #000!important;
background-image: -moz-linear-gradient(top, #444, #666)!important;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;
/* Box Shadow */
box-shadow: inset 0 0 10px #000;
-moz-box-shadow: inset 0 0 10px #000;
-webkit-box-shadow: inset 0 0 10px #000;
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a class="active" href="index.html">home</a></li>
<li><a href="menu.html">menu</a></li>
<li><a href="project.html">projects</a></li>
<li><a href="affiliates.html">affiliates</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</body>
</html>

In DW6 how to I change the border radius for a button in CSS panel

We have used Microsoft's Expression 4 and it was simple to change the border radius when doing say a button. We have now moved to DW6 but in the CSS Rules Definition area you can do a border but not alter the radius to give rounded edges. When we want to do this we have to go back to Expression 4 as DW6 doesn't seem to have this facility. I can't beleive that it doesn't so I must have just missed it. If anyone can point me in the right direct I would appreciate it.

I rarely use the CSS editor panels in DW. I find it's faster to switch to Code View and edit CSS properties manually.
Nancy O.

Flash update Jan 2014 in Chrome CSS Border-radius BIG TIME bug !

Please confirm and fix !
Jan 30 2014
Chrome Version : 32.0.1700.72
Operating System: Windows 7 through 8.1
Several days ago Chrome updated its Flash player to version 12 and it introduced a bug somewhere.
Setting border-radius to a flash object will make it vanish.
<object type="application/x-shockwave-flash" data="test.swf" style="border-radius:1px"/>
It works on Firefox with flash player 12, it also works on Chrome with flash player 11, but it stopped working several days ago when FP 12 was added to chrome.

You have posted to the Shockwave forum which, despite the title, has nothing to do with Shockwave Flash. Please post to a Flash-related forum

Border-radius property not being recognized in CS5

I have just started using dreamweaver, and the border-radius css property is not working for me. It doesn't show up in the list, and it says that it is an "invalid" property when I type it in manually. Any help? Note: I'm using CS5, not CS5.5 as far as I can tell.
Thanks in advance!

Design View won't show the radius (or just about any CSS3), in fact, 3 versions later it still doesn't show up in DWCC. Live View won't either since the webkit engine in DWCS5 is pretty ancient.
Always use Preview in Browser to preview in the actual browsers you intend to support, that way you know exactly what's going on with your pages. This will also help you find the browsers that still require prefixes on certain CSS3 attributes.

CSS rendering issue: border: 2px #990000 dashed; border-radius: 50%;

Instead of dashed circle I got full circle.
top div:
border: 2px dashed #990000; border-radius: 50%;
bottom div:
border: 2px dashed #990000; border-radius: 25%;
Image 1 - Firefox
Image 2 - Chrome

Another example of a random line appearin approx. middle of window.
Full artifact
Fading out... on window resize. then disappears.
The grey block is just a simple div, with a drop shadow.
(href removed)

Skinning- Border Radius not working in IE8 / IE7

Hi,
Jdev Version: 11.1.1.5.
I have styled my command button with the border-radius. The curved edges are not showing up in Internet Explorer 7 / 8.
IE9, firefox and chrome rendering them properly.
my CSS code..
af|commandButton.testButton
    background-color: Black;
    color: White;
    width: 85px;
    height: 30px;
    font-family: Calibri;
    font-size: larger;
    border-radius: 10px;
    behavior: url(PIE.htc);
I got line num# 10 from http://css3pie.com/about/
But no luck. Can anyone help me ??
Thanks,
Saif.

Question: have you installed PIE on the IE?
Or have you just copied the line 10?
You have to install the PIE extension and hope that it work, see Getting Started &#8211; CSS3 PIE: CSS3 decorations for IE
Timo.

How to remove any instance of "border-radius: 100%;" on a certain website?

I want to disable this line from appearing in the inspect element on one website only. How do I make firefox do this automatically? If possible, just make it an addon because IDK how and I dont know how to code. Not going to learn.
Has to work in firefox 28, and I only want to prevent Firefox from loading this line.

Aha, okay, you can use a custom style rule to hack the page. I realize this kind of looks like coding, but the code is already written, so it's more like copying and pasting.
First, you can install the Stylish extension. This add-on makes it easier to apply custom style rules to pages (and, if necessary, Firefox's UI). You can get it here: https://addons.mozilla.org/firefox/addon/stylish/
Second, you'll need to select and copy this six-line style rule:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.mineheroes.net") {
.avatar img, .avatar .img, .avatarCropper {
border-radius: 2px !important;
Third, load up a thread in the site and look for the Stylish "S" icon on the toolbar. ''(If necessary, you can use the Customize feature to add it to the toolbar temporarily. See: [[Customize Firefox controls, buttons and toolbars]].)''
Click the S, then Write New Style, then Blank Style.
A new tab should open with the cursor next to "1" (the line number counter).
Paste the rule you copied earlier and click Preview.
When you switch back to the forum, the avatar icons should be (mostly) square again.
I have attached a screen shot showing what that should look like. ''(To shrink the rule editor to a small box, I first right-clicked the tab and used Move to New Window.)''
Assuming it worked, you can switch back over the Stylish editor, give your rule a name, and save it.
Any luck?

Border Radius Problem

Similar Messages

Maybe you are looking for