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
Related
I came across this trick when I wanted to feature some headline text. I love the look of it as was wondering if there was a way to have the ends point up.
.pagebreaker {
padding: 10px;
margin-bottom: -5px;
border-top: 4px solid #f6d241;
border-radius: 35px;
}
ref Image:
I've tried negative border-radius and negative padding. Is there something I am missing here? Or is this something that can't be done?
Thanks.
Use border-bottom
.pagebreaker {
padding: 10px;
margin-bottom: -5px;
border-bottom: 4px solid #f6d241;
border-radius: 35px;
width: 300px;
height: 10px;
}
<div class="pagebreaker"></div>
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.
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;
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/
EDIT: Just to be completely clear. My primary interest is NOT IE6 but whatever solution I use does need to work in IE6 without looking completely hideous.
So a solution in which the rounded corners ended up square in IE6 would be fine.
A solution where the rounded corners ended up in random locations in IE6 would not be OK.
I have used this tool/technique http://www.spiffycorners.com/index.php?sc=spiffy&bg=FFFFFF&fg=000000&sz=5px to produce some simple rounded corner divs.
Can anyone tell me how to adapt the CSS output by this tool so that the div only has a border (and no fill) ? At the moment you get a solid block of colour (black in this example).
I'm open to completely different techniques but must be imageless and must degrade reasonably for IE6 ('reasonably' includes no rounded corners but still get a box)
I've tried channging the 'background-color' to 'inherit' but then I lost the left and right hand sides of the box.
Sample css/html follows:
<style type="text/css">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#000000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #919191;
border-right:1px solid #919191;
background:#3f3f3f}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
background:#303030}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #303030;
border-right:1px solid #303030;}
.spiffy4{
border-left:1px solid #919191;
border-right:1px solid #919191}
.spiffy5{
border-left:1px solid #3f3f3f;
border-right:1px solid #3f3f3f}
.spiffyfg{
background:#000000}
</style>
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
<!-- content goes here -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
jQuery UI does a great job at only applying the radius to the border, using native CSS:
/* Individual Corners */
.ui-corner-tl {
-moz-border-radius-topleft: 4px/*{cornerRadius}*/;
-webkit-border-top-left-radius: 4px/*{cornerRadius}*/;
border-top-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-tr {
-moz-border-radius-topright: 4px/*{cornerRadius}*/;
-webkit-border-top-right-radius: 4px/*{cornerRadius}*/;
border-top-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-bl {
-moz-border-radius-bottomleft: 4px/*{cornerRadius}*/;
-webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/;
border-bottom-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-br {
-moz-border-radius-bottomright: 4px/*{cornerRadius}*/;
-webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/;
border-bottom-right-radius: 4px/*{cornerRadius}*/;
}
/* All Corners */
.ui-corner-all {
-moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/;
border-radius: 4px/*{cornerRadius}*/;
}
Then you can set border or border-color to apply only a border to it.
See the jQuery-UI Themes.css file for more styles.
Currently achieving the border radius is only mastered in FireFox (-moz-border-radius: 5px;) and in Chrome (-webkit-border-radius: 5px;).
There are scripts to implement the same effect in IE, however, they are not that great. Mainly when it comes to patterns as background-images.
Lets take an example, that you got a pattern as background-image and solid block container with rounded borders on top. The script will produce the borders indeed, but the corners will be solid color and not transparent.
However, there is a way! Its called CSS3 PIE. Learning to use it at first is a nightmare. However, if you get it working..it will be the ultimate solution! CSS3 PIE will add radius to your corners and keep the corner-background transparent. Also, it works great in IE6.
Now, as I understand.. You simply want a border and the container not filled. Well, try the demo on the bottom, in FireFox or Chrome. Is this what you meant? If so, then still CSS3 PIE, is your best bet!
<style>
#demo_container {
/* The actual trick: */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* For making demo more fun: */
border: 2px solid black;
padding: 10px;
margin: 10px;
}
</style>
<div id="demo_container">Stack Overflow</div>
This is the closest I could get :P
.spiffy1 {
margin-left: 4px;
margin-right: 4px;
padding-left: 1px;
padding-right: 1px;
border-left: 1px solid #919191;
border-right: 1px solid #919191;
background: #3F3F3F;
}
.spiffy2 {
margin-left: 2px;
margin-right: 2px;
padding-right: 1px;
padding-left: 1px;
border-left: 2px solid #303030;
border-right: 2px solid #303030;
background: #303030;
}
.spiffy3 {
margin-left: 1px;
margin-right: 1px;
border-left: 1px solid #303030;
border-right: 1px solid #303030;
}
.spiffy4 {
border-left: 1px solid #919191;
border-right: 1px solid #919191;
}
.spiffy5 {
border-left: 1px solid #3F3F3F;
border-right: 1px solid #3F3F3F;
}
<div style=" height:100px; border: 1px solid black; border-width: 0px 1px;">
Seriously... use border-radius! I don't think it's a good thing to have a lot of code, only to have a great effect for an ancient browser...