I am looking at adding a border-top, 20px solid red;, and I want the bottom of this to be rounded. With the following it does seem to be working for me.
-moz-border-radius-bottomright: 12px 12px;
border-bottom-right-radius: 12px 12px;
-moz-border-radius-bottomleft: 12px 12px;
border-bottom-left-radius: 12px 12px;
How can I do it?
I'm not sure why you aren't able to produce the result, but the above code looks correct. I've provided a JS Fiddle example, and mine works. I'm assuming you added the border-top property to the box. I don't think you need two values for each border-property. Hope this helps.
Create a new layer object with an ID of box and apply the following CSS. If you add a paragraph within the box the border will not appear.
http://jsfiddle.net/brownlace/kEvrE/1/embedded/result/
/* css3 rounded corners */
#box {
border-top: 20px solid red;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
}
I suggest you to use border instead of border-top to make sure the property is applied to all borders.
border: 20px solid red;
In this case you can use border-bottom-left-radius: 12px; with one value because both are the same.
Also you can add vendor property for webkit:
-webkit-border-bottom-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
Here is a fiddle.
Related
After much poking around online, I've found lots of advice and examples for using CSS to style submit buttons, but they all result in rectangular buttons. I want to make a non-rectangular button that automatically sizes itself to fit the button legend. Specifically, I want the button to look like this (plus or minus the rounded corners):
Any suggestions?
Totally possible with border radius, but you will have to submit with JavaScript instead of the <button> element.
For instance:
.icon {
background-color: lightblue;
width: 100px;
padding: 4px;
margin: 10px;
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-right-radius: 60px 22px;
-moz-border-radius-topright: 60px 22px;
border-bottom-right-radius: 60px 22px;
-moz-border-radius-bottomright: 60px 22px;
}
Makes:
See it live:
http://jsfiddle.net/9zamA/
You could use the CSS border triangle trick: http://css-tricks.com/snippets/css/css-triangle/
You could use svg.
I am trying to use box-shadow, and border-radius together on a webpage, and it is showing a white image that fills in the space where the radius is. Think of it like when you safe a "transparent" image in photoshop with a drop shadow, to a jpg, or png-8 file.
Here is an image to show you what I mean.
(i cant post images yet, but here is the link)
http://i.imgur.com/jDpIH.png
I am using this as my CSS
.whole
{
width: 1000px;
margin: 0 auto;
-webkit-box-shadow: 0px 3px 5px 2px #000000;
-mox-box-shadow: 0px 3px 5px 2px #000000;
box-shadow: 0px 3px 5px 2px #000000;
}
.top
{
height: 120px;
background-color: #1F1209;
margin-top: 50px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.footer
{
height: 250px;
background-color: #834C24;
-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;
}
So does anyone know if there is a way I can fix this? this is happening in Firefox and IE, by the way. I havent been able to check it out in other browsers though.
I would really prefer not to use a Photoshopped image... As CSS3 should definitely be used.
Any thoughts on this? I would greatly appreciate any help! :)
Thanks for your time folks!
A little tip for you
Use this css3 for shortcuts instead of adding -left -right- top
border-radius:0px 0px 0px 0px;
<!-- [top left] [top right] [bottom right] [bottom left] -->
That would be easier if you do that.
And as for the box-shadow... I don't know why it is like that but I used this code and it works perfectly well.
box-shadow:0px 0px 10px black;
<!-- in case you don't know ... [x coordinate] [y coordinate] [size of shadow] [color] -->
Well, I don't know if these codes will work on IE because I don't use IE browser and my computer will suddenly hang for a bit but... anyways.
I rewrite one of your class css code and I hope it work.
.footer
{
height: 250px;
background-color: #834C24;
border-radius:10px 10px 10px 10px;
box-shadow:0px 0px 50px black;
}
And I think even though you don't put -webkit- and -moz-, Mozilla and Chrome will read that. I hope it works on IE, too.
Anyways... that's it. Hope that'll work.
You probably have a background colour associated with the container.
The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera, because it is CSS3 property. The syntax is:
border-radius: 1-4 length|% / 1-4 length|%;
Example 1
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
Example 2
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
Having a bit of an issue with border-radius. I have successfully rounded off my rectangle, but I am having an issue with rounding the hover that I have placed over it. You will see in the top and bottom corners of the rounded rectangle the hover itself is not rounded and is actually a rectangle. I have tried rounding it but it rounds the center as well. I know this probably doesn't make sense but you will understand by looking here: http://jsfiddle.net/hCg3J/
All I want to do is to have each selection highlight the whole of that area, and not stick out.
HTML:
<ul class="pageitem">
<li class="list" style="border-top:none;">iPhone 4/4S</span><div class="arrow"></div></li>
<li class="list">iPhone 3G/3GS</span><div class="arrow"></div></li>
<li class="list">iPod Touch</span><div class="arrow"></div></li>
</ul>
CSS
.pageitem {
-webkit-border-radius: 8px;
behavior: url(/border-radius.htc);
border-radius: 8px;
position:relative;
zoom: 1;
-moz-border-radius: 8em;
-khtml-border-radius: 8px;
border-radius: 8px;
background-color: #fff;
border: #878787 solid 1px;
font-size: 12pt;
overflow: hidden;
padding: 0;
height: auto;
width: auto;
margin: 3px 9px 17px;
list-style: none
}
Just add proper -webkit-border-radius in .list:hover, name:hover and adjust it to your needs.
Here is a jsfiddle proof of concept. What you need to do is to round only top-left and top-right corner for top element and bottom-left, buttom-right for the bottom element. I would suggest adding a special class for these elements.
UPDATE:
Actually as I suggested in comment I have added first-child and last-child selectors, updated fiddle
.list:hover:first-child, name:hover:first-child {
-webkit-border-radius: 8px 8px 0px 0px;
}
.list:hover:last-child, name:hover:last-child {
-webkit-border-radius: 0px 0px 8px 8px;
}
Is it possible to create such a rounded corner gray layout in css3 which is around the content and right side bar Livesite and image is here
Sorry i m beginner at css3.
.element {
/* set border styling */
border-color: black;
border-style: solid;
border-width: 10px;
/* set border roundness */
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
Because border-radius is a CSS3 feature and quite new, the -moz and -webkit versions are recommended to support older browsers.
Simple
.round {border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
Just add this class to whatever you want rounded. You can also change the radius.
For the border border:10px solid #E0DDD7
You can replace the #E0DDD7 with Black, Silver, Blue etc...
If you are looking to just have top rounded corners, You can
.round-top {
-webkit-border-top-right-radius: 24px;
-webkit-border-top-left-radius: 24px;
-moz-border-top-right-radius: 24px;
-moz-border-top-left-radius: 24px;
}
Yes; you can create this with yourself check this:
http://css3generator.com/
I have css looks like that:
#caltable th {
border: solid 1px #333;
border-radius: 7px;
background: #f00;
}
But this is what i've got in browser (Chrome/FF):
The question is how to get black line also rounded?
Change border-collapse:collapse to border-collapse:separate on the <table>.
You should also add support for browsers which are not at the newwest version:
-moz-border-radius: 7px;
-o-border-radius: 7px;
-ms-border-radius: 7px;
-webkit-border-radius: 7px;
You do not need to. It's done automatically
http://sandbox.phpcode.eu/g/e9ab8
http://phpcode.eu/images/1317547931.png