How to make the edges round - css

I have this css code which I use for title background in JSF page.
.container{
background: rgb(180,221,180); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(180,221,180,1) 0%, rgba(95,163,9,1) 0%, rgba(95,163,9,1) 48%, rgba(0,87,0,1) 68%, rgba(0,0,0,1) 86%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(180,221,180,1)), color-stop(0%,rgba(95,163,9,1)), color-stop(48%,rgba(95,163,9,1)), color-stop(68%,rgba(0,87,0,1)), color-stop(86%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(180,221,180,1) 0%,rgba(95,163,9,1) 0%,rgba(95,163,9,1) 48%,rgba(0,87,0,1) 68%,rgba(0,0,0,1) 86%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, rgba(180,221,180,1) 0%,rgba(95,163,9,1) 0%,rgba(95,163,9,1) 48%,rgba(0,87,0,1) 68%,rgba(0,0,0,1) 86%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(180,221,180,1) 0%,rgba(95,163,9,1) 0%,rgba(95,163,9,1) 48%,rgba(0,87,0,1) 68%,rgba(0,0,0,1) 86%); /* IE10+ */
background: linear-gradient(45deg, rgba(180,221,180,1) 0%,rgba(95,163,9,1) 0%,rgba(95,163,9,1) 48%,rgba(0,87,0,1) 68%,rgba(0,0,0,1) 86%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
/*
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #5fa309), color-stop(1, #3b8018));
background:-webkit-linear-gradient(top, #5fa309 0%, #3b8018 100%);
background:-moz-linear-gradient(top, #5fa309 0%, #3b8018 100%);
background:-o-linear-gradient(top, #5fa309 0%, #3b8018 100%);
background:-ms-linear-gradient(top, #5fa309 0%, #3b8018 100%);
background:linear-gradient(top, #5fa309 0%, #3b8018 100%);
*/
position:relative;
display:inline-block;
padding:0 20px 0 10px;
width:270px;
line-height:20px;
font-size:12px;
font-family:sans-serif;
text-shadow:0 1px 0 #264400;
font-weight:bold;
color:#fff
}
How I can make the edges of the figure more round?


.roundcorners {
/* older webkit */
-webkit-border-radius: 12px;
/* Older firefox */
-moz-border-radius: 12px;
/* General support */
border-radius: 12px;
}
You can see the browser support on caniuse.com
the 12px is adjustable and will determine the radius of the borders.
As usual, much more detailed info in the MDN Documentation


You need to use the various border radius styles. Here is a good tool to generate the CSS:
http://border-radius.com/

Related

Completely different gradients for each border side?

I'm looking to specify a different linear gradient for each of the 4 separate sides of a border. I care about Chrome only. I don't want to use hack's or backgrounds. I swear I did this in an old project I did, using the following extremely crude example:
border-top:linear-gradient (top to bottom, 0%, red, 100%, blue),
-webkit:etc...,
-moz:etc...;
border-bottom:etc...
border-left:etc...
border-right:etc...
I hope this is a duplicate question, but I looked everywhere (including: Create a border gradient for each of the 4 borders) and didn't find the answer I'm looking for.

As mentioned by #Harry, I very much doubt this was easily possible in a previous project (seeing as in the linked answers previously, this is very much a 'must hack' situation) - both of the answers being answered by myself and Harry.
I have not come across a situation where that has ever been easily possible (hence why people ask such questions), and hence why we don't give 'easy' answers.
This is the hence reason why I have included the following snippet:
div {
height:300px;
width:400px;
position:absolute;
}
.one, .two {
position:absolute;
}
.one:before, .one:after{
content:"";
position:absolute;
height:10px;
width:400px;
left:0px;
top:0px;
background: rgb(242,246,248); /* Old browsers */
background: -moz-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(242,246,248,1)), color-stop(50%,rgba(216,225,231,1)), color-stop(51%,rgba(181,198,208,1)), color-stop(100%,rgba(224,239,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=1 ); /* IE6-9 */
}
.one:after{
top:auto;
bottom:0;
background: rgb(180,221,180); /* Old browsers */
background: -moz-linear-gradient(left, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(131,199,131,1)), color-stop(33%,rgba(82,177,82,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=1 ); /* IE6-9 */
}
.two {
height:280px;
width:380px;
top:10px;
left:10px;
z-index:8;
}
.two:before, .two:after {
content:"";
position:absolute;
height:300px;
width:10px;
left:-10px;
top:-10px;
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.two:after{
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
left:auto;
right:-10px;
}
<div class="one">
<div class="two">Four gradients!</div>
</div>
Alternative
The alternative, as mentioned in both the comments AND linked question's answers, would be to use multiple background gradients and position them on corners. - Just as Harry had pointed out:
.border-image {
height: 200px;
width: 200px;
background: -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(0deg, transparent 10%, white 10%, red 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, blue 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, green 50%, white 90%, transparent 90%);
background: -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(0deg, transparent 10%, white 10%, red 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, blue 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, green 50%, white 90%, transparent 90%);
background: linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(90deg, transparent 10%, white 10%, red 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, blue 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, green 50%, white 90%, transparent 90%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
background-position: 0px 0px, 0px 100%, 0px 0px, 100% 0px;
padding: 20px;
}
<div class="border-image"></div>
But, to be completely honest, I don't believe there is (yet) a 'set way' of achieving this functionality (mainly because it is unlikely to be fairly popular) - and so creative solutions are used instead.

CSS3 Gradient Background working in Chrome and Firefox but not IE 11

I currently am trying to use a linear-gradient from CSS3 as the background of a site, and from what I can tell, am following the spec to comply with Internet Explorer right, but I can't tell what's not working here.
body {
padding: 0px;
margin: 0px 0px 0px 0px;
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(26,42,132,1) 40%, rgba(33,29,155,1) 50%, rgba(26,42,132,1) 60%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(40%,rgba(26,42,132,1)), color-stop(50%,rgba(33,29,155,1)), color-stop(60%,rgba(26,42,132,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

We are using following CSS in one of our projects and it works on Chrome, Firefox and IE11.
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image: -moz-linear-gradient(#000, transparent);
background-image: -o-linear-gradient(#000, transparent);
background-image: linear-gradient(#000, transparent);
See this Fiddle as well: http://jsfiddle.net/3ck72fbc/

How can I put two CSS gradient backgrounds in one div?

I have the following CSS:
.main {
padding-right: 15px;
padding-left: 15px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)top;
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,0) 100%)top; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(255,255,255,0)))top; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)top; /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)top; /* IE10+ */
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%) top; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#00ffffff',GradientType=0 )top; /* IE6-8 */
background-size: Auto 200px;
background-repeat: repeat-x;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)bottom;
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,0) 100%)bottom; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(255,255,255,0)))bottom; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* IE10+ */
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%) bottom; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#00ffffff',GradientType=0 )bottom; /* IE6-8 */
background-size: Auto 200px;
background-repeat: repeat-x;
padding-top: 50px;
min-height:600px;
}
And here is a live example: http://jsfiddle.net/ZtJmM/
I want that one gradient be at the top, and one at the bottom of the element. Is that possible?
Thanks!

Yes, use them in the same statement like:
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,
rgba(255,255,255,0) 100%) top,
linear-gradient(to bottom, rgba(229,229,229,1) 0%,
rgba(255,255,255,0) 100%) bottom;

Add css gradient

I use this css code to visualize green background at jsf page:
.container{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #5fa309), color-stop(1, #3b8018));
background:-webkit-linear-gradient(top, #5fa309 0%, #3b8018 100%);
background:-moz-linear-gradient(top, #5fa309 0%, #3b8018 100%);
background:-o-linear-gradient(top, #5fa309 0%, #3b8018 100%);
background:-ms-linear-gradient(top, #5fa309 0%, #3b8018 100%);
background:linear-gradient(top, #5fa309 0%, #3b8018 100%);
position:relative;
display:inline-block;
padding:0 20px 0 10px;
width:270px;
line-height:20px;
font-size:12px;
font-family:sans-serif;
text-shadow:0 1px 0 #264400;
font-weight:bold;
color:#fff
}
.container:after{
content:'';
background:-webkit-gradient(linear, left top, right bottom, color-stop(0, #5fa309), color-stop(1, #3b8018));
background:-webkit-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
background:-moz-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
background:-o-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
background:-ms-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
background:linear-gradient(top left, #5fa309 0%, #3b8018 100%);
position:absolute;
top:3px;
right:-7px;
width:15px;
height:15px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg)
}
I'm interested how I can add this white color effect at the end:
Is this possible with pure css?

You can get pretty close using one of the many CSS gradient generators out there. Here is one that I generated from ColorZilla:
background: #b4df5b; /* Old browsers */
background: -moz-linear-gradient(45deg, #b4df5b 40%, #ffffff 89%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(40%,#b4df5b), color-stop(89%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #b4df5b 40%,#ffffff 89%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #b4df5b 40%,#ffffff 89%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #b4df5b 40%,#ffffff 89%); /* IE10+ */
background: linear-gradient(45deg, #b4df5b 40%,#ffffff 89%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
You will have to refine the gradient to if you need it to be closer to your goal. For the background to look precisely the same in all browsers, background images are your best bet.

make similar css colorized box

I am trying to get The degree of color of the box in the picture
http://i46.tinypic.com/iefcpl.png
i like the box in the picture and i want make similar one
This is my code, and i can't make similarty
<style>
.b{
background:-moz-linear-gradient(top, #fff, #ebebeb);
height:25px;
border:1px #efefef solid;
}
</style>
<div class="b">
</div>

.b{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ebebeb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 ); /* IE6-9 */
height:25px;
border:1px #DDDDDD solid;
}​
I used Ultimate CSS Gradient Generator to generate the gradient for all browsers.
DEMO

Resources