I'm styling a lightbox div with the following properties:
#lightbox {
border: 0.3em solid #acaeb0;
-webkit-border-radius: 1em;
background: #eee -webkit-gradient(linear, 0% 60%, 0% 100%, from(#eee), to(#ccc));
-webkit-box-shadow: 0 0 0.6em 0.3em #888;
}
Problem is that the resulting rounded corners looks very ugly (using safari5):
Problem is the white space at the rounded corner.
Do you know how I can avoid this behavior?
EDIT:
After adding the -webkit-background-clip: padding-box; property it looks better but not perfect:
I reduced the width of the border but it looks the same with thick borders. Do I have to set another property to make it perfect looking?
EDIT2:
Seems to be a Bug of webkit:
https://bugs.webkit.org/show_bug.cgi?id=21819
This is called "background bleeding".
For a possible fix, take a look at this site: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed.
As it says, you should try setting:
-webkit-background-clip: padding-box;
The only hack which gave me satisfaction on a similar case was to wrap a box within another : one with the background, the second with the border, both with the same border-radius but the first one with a transparent border. And the code comes like this :
.fist-block {background: black; border-radius: 20px; border: 0px solid transparent;}
.second-block {border-radius:20px; border: 1px solid red;}
I get this problem in Chrome when using a 1px border however using 2px and above looks fine.
Chrome: 13.0.782.218 m
Related
I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page.
Here is my CSS code:
.horizontalLines {
border-bottom: 2px solid #CCCCCC;
padding-top: 25px;
width: 100%;
}
This code only allows me to make only one line, how can i make multiple lines?
As an alternate solution, there's a beautiful lined paper effect written using CSS available here.
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
Browser Support: The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be
displayed correctly even on those browsers (for example at the time of
writing, Gecko is quite buggy with radial gradients).
Using your way you have to insert multiple of these elements. You can't simply repeat them.
Another - and I guess more suitable way - would be using a background image that you repeat horizontally and vertically to achieve this effect.
body {
background: transparent url(path/filename) repeat 0 0;
}
Or, if you can use gradients, nikhita dkslfslg's answer (+1 for that) might help.
Here you go.
.paper {
background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs=");
}
Just Encode an image in base64 and it works fine.
You can try encoding HERE.
You can do it with box shadows:
.lines{
width:500px;
height:400px;
background: red;
box-shadow: 0px 10px 0px 0px black, 0px 20px 0px 0px green, 0px 30px 0px 0px blue;
}
http://jsfiddle.net/7DkKc/
Or simply with images:
.lines{
background: transparent url(url) 0 0 repeat-x;
}
Or with gradients.
http://www.colorzilla.com/gradient-editor/
So I have a text input, im using html5, on chrome, and I want to change the look of a text input, I've removed the outline on focus (orange on chrome), I set the background to a light color #f1f1f1 but now there is like a thicker border on the top and left sides, like it's meant to look pushed in, when there is no change in background color this doesn't happen. How do I remove it? Sorry I can't provide a picture, on a mobile device.
It happens on chrome, ie, and Firefox, can't test any others.
border-style:solid; will override the inset style. Which is what you asked.
border:none will remove the border all together.
border-width:1px will set it up to be kind of like before the background change.
border:1px solid #cccccc is more specific and applies all three, width, style and color.
Example: https://jsbin.com/quleh/2/edit?html,output
This is the solution for mobile safari:
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
as per https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
and as suggested here: Remove textarea inner shadow on Mobile Safari (iPhone)
None of the solution are working currently.
Here is my solution. You can add prefixes.
box-shadow: inset 0px 0px 0px 0px red;
Add border: none or border: 0 to remove border at all, or border: 1px solid #ccc to make border thin and flat.
To remove ghost padding in Firefox, you can use ::-moz-focus-inner:
::-moz-focus-inner {
border: 0;
padding: 0;
}
See live demo.
Set border: 1px solid black to make all sides equals and remove any kind of custom border (other than solid).
Also, set box-shadow: none to remove any inset shadow applied to it.
Try this
outline: none;
live demo https://codepen.io/wenpingguo/pen/KQgbXq
All browsers, including Safari (+ mobile):
input[type=text] {
/* Remove */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Optional */
border: solid;
box-shadow: none;
/*etc.*/
}
I'm working on firefox. and I was having the same issue, input type text are auto defined something looks like boxshadow inset, but it's not.
the you want to change is border... just setting border:0; and you're done.
here is a small snippet that might be cool to try out:
input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}
note that: border-style removes the inner shadow.
input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}
<input type="text"/>
IE is showing a bleeding bg color and border on the header area for example here in IE9. The CSS is below, but I can't understand why..
#header-wrapper {
position: relative;
width: 98.2%;
margin: 0 0.8%;
overflow: hidden;
height: 100px;
border: 1px solid #333441;
border-bottom: 0;
background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#E4E4E4));
background: -moz-linear-gradient(top, #f6f6f6, #e4e4e4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#e4e4e4');
border-radius: 8px 8px 0 0;
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
}
Any ideas would be great..
If available within your project constraints. I would suggest using something like bourbon, which gives you all the mixins to do what you need, with browser compatibility in mind. However, such a tool requires SASS. Which in the long run, isn't a bad idea to know / have.
Alternatively there are other tools like modernizr, that can help you in this case as well.
Moreover, you can dig into the source code CSS frameworks such as Twitter Bootstrap and grab the code they are using for border radius.
http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
Is it possible to have a border that is thinner than 1px and works in IE6+ and is not an image and renders properly visually?
Thank you.
I think you could define the width of a border using units like em which would come out to less than 1px, and it would be valid. However, like Will Martin said, for display purposes it would just round it up or down to a whole pixel.
Edit: I have overseen the IE6 restriction, but I leave the answer here for others ...
Its possible with transform:scale(0.5) and put a border element with border:1px; inside. So you get a half pixel border, that (although tricked and browser dependend) is displayed on screen. But I use that trick for printing.
sure, you have to adapt the content of the element, or play with position
.outer {
border:1px solid green;
}
.halfpix {
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
width:200px;
height:100px;
border:1px solid black;
}
<div class="outer">
<div class="halfpix">
</div>
zoom browser window if your browser does not display
</div>
I don't know about IE8-10 (IE6-7 definitily no go) , but in Chrome and FF I get the thinnest border with box-shadow. Works best to get a 1px <hr> instead of the autorendered 2px, but can be used on a border as well.
The thin border on the HR is more prominent in FF than Chrome, but also Chrome renders 2px.
http://jsfiddle.net/GijsjanB/3G28N/
.thin {
border: 1px solid white;
box-shadow: 0 0 1px black;
}
No. You can't show a size smaller than one pixel because pixels are the basic unit of the monitor. And anyway, no browser I know of allows you to specify sub-pixel widths. They just get rounded up to 1px or down to 0px.
Although this isn't (currently) possible in any version of IE or Edge, on the latest versions of Firefox and Chrome you can now use border width values less than 1px.
.borderTest {
box-sizing: border-box;
display: block;
margin: 0.5em;
padding: 0.5em;
width: calc( 100% - 1em );
}
.borderTest:nth-child(1){
border: 1px solid #000
}
.borderTest:nth-child(2){
border: 0.75px solid #000
}
.borderTest:nth-child(3){
border: 0.5px solid #000
}
.borderTest:nth-child(4){
border: 0.25px solid #000
}
<div class="borderTest">1px</div>
<div class="borderTest">0.75px</div>
<div class="borderTest">0.5px</div>
<div class="borderTest">0.25px</div>
This outputs the following on a UHD screen:
you can transform the line like that:
.thin{ -ms-transform:scale(1, 0.5); -webkit-transform:scale(1, 0.5); transform:scale(1, 0.5);}
or, if the line is vertical
.thin{ -ms-transform:scale(0.5, 1); -webkit-transform:scale(0.5, 1); transform:scale(0.5, 1);}
To render native 1px borders on high DPI/#2x/retina displays, there are a couple of tricks.
On Firefox and Safari (macOS and iOS), use a 0.5px border:
/* Fallback: Most browsers now render 0.5px as 1px though */
.el {
border: 1px solid red;
}
.retina .el {
border: 0.5px solid red;
}
On Chrome, use a box-shadow with a 0.5px spread:
.retina-chrome .el {
box-shadow: 0 0 0 0.5px red;
}
Use JS to add a class to the HTML element to only target #2x+ displays.
if (window.devicePixelRatio >= 2) {
document.documentElement.classList.add(
window.chrome ? 'retina-chrome' : 'retina'
);
}
For #1x displays, use a slightly lighter color 1px border.
Try adding a box-shadow
box-shadow: 0px 0px 1px 0px black;
Edit: Chrome 98 (February 1, 2022) added direct support for border-width values less than 1px.
As of mid 2020, current versions of Safari and Firefox both support border-width: .5px.
On the other hand, Chrome will treat it as 1px.
You can detect whether the browser supports it with something like:
var el = document.createElement('div');
el.style.position = 'fixed';
el.style.borderTop = '.5px solid';
document.body.appendChild(el);
var hasSubpixelBorder = el.getBoundingRect().height < 1;
document.body.removeChild(el);
Make sure this is called after document.body is created if you are doing it at startup.
If this is not supported (e.g. Chrome) you can add a class to document.body or some parent element to cause descendants to take on a different border style:
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.noSubpixelBorder .border-top {
border-top-width: 0;
background-image: linear-gradient(180deg, var(--mycolor) 0, var(--mycolor) .5px, transparent 0);
}
}
#media (-webkit-min-device-pixel-ratio: 3) and (-webkit-max-device-pixel-ratio: 3.5), (min-resolution: 3dppx) and (max-resolution: 3.5dppx) {
.noSubpixelBorder .border-top {
background-image: linear-gradient(180deg, var(--mycolor) 0, var(--mycolor) .333333px, transparent 0);
}
}
You can use multiple linear gradients to achieve borders on multiple sides. This takes over background-image so if you are using it for something else you will need to find another way (there are a couple others).
This is not particularly clean, but it seems to consistently work.
If you wanted to be super crafty, you could support oddball pixel ratios by computing the stylesheet on the fly.
0.1em displays border smaller then 1px try dotted border with 1px and compare it with 0.1em
Maybe late post ,
<table>
<tr>
<td style="border:1px ridge">
....text....
</td>
</tr>
<table>
using ridge(alternative) for thin border //IMO
For me this worked:
I needed a white border with less than 1px
So I added some opacity to the border color and it started to look thiner than 1px
like this:border-top: 1px solid #ffffff26;
try
border-top: 1px solid #c9d6df;
smaller than
border: 1px solid #c9d6df;
You could use CSS border-image to set an SVG or other image as the border, and then you could make the image line as narrow as you would like. It may still be rendered on screen as 1px, but if you then print or save the webpage out, the true size will be kept.
With border you have a hard time to achieve thinner line!
If you want to have a horizontal line like me, you can do that with height instead of border:
Note: Maybe you need to zoom in to see the real difference between the two lines!
.normal {
height: 1px;
background-color: #8bacda;
}
.thinner {
height: 0.01em;
background-color: #8bacda;
}
<p>Normal Line</p>
<div class="normal"></div>
<p>Thinner Line</p>
<div class="thinner"></div>
Hi I'm not too sure how to create the attached image effect where the right hand side is my main content and it shades onto my left sidebar which has a gradient effect downwards.
Check this out: CSS3 gradient Generator, pick the colors and generate the code, then add it to the body in your CSS (Or whatever element you want it on).
.body /*or element of your choice*/
-webkit-gradient(
{
linear,
left bottom,
left top,
color-stop(0.02, rgb(91,204,245)),
color-stop(0.76, rgb(5,37,70))
)
-moz-linear-gradient(
center bottom,
rgb(91,204,245) 2%,
rgb(5,37,70) 76%
)
}
For the shadow from your main content use:
.MyElement
{
box-shadow: 10px 10px 5px #888;
}
And also check out CSS3 Box-shadow.
Also, because not every browser supports the box-shadow yet (IE), you can use border images. But IE doesn't suppport that either so, what I did on a site was to just make a 1px high PNG image of the shadow and set it as the background to my wrapper div, repeated it down/up (can't remember if that's X or Y) and it worked fine :)
Hope some of that helps.
img.shady
{
display: inline-block;
webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
padding: 10px;
margin-bottom: 5px !important;
min-height: 240px;
width: 630px;
border: 1px solid #D7D7D7
}
Your sidebar should use a png image that has an opacity/transparency, then the shaded sidebar will work with gradient background. (Note, IE6 wont like this solution, so you have to find an IE6PNG hack solution which can be found almost everywhere nowadays)
For gradient background, either create a background image or use the css3 gradient