I want to create a thin border. Simple. My code will not render it. In order to give it the maximum specificity I placed temporarily in a page element:
<div style="max-width: 100%; position: relative;border-radius: 4px; border-color: #ddd; border:thin; background-color: #ffffff ;">
Regardless of anything I do,the border will not render. Everything else renders. If I put the background colour to red, it renders fine. Not the border.
So, looking into Chrome developer tools I see that the border width is described as 0px, which makes no sense. However if I expand that I see my value of 1px.
There are no other inherited values in the CSS which would appear to override my border. So I am totally confused.
Many thanks !
You need to define the style for your border.
border-style: solid;
Also, using
border: thin;
overrides any previous values you've set, use
border-width: thin;
instead.
Related
I would like to use the color #644220 for the border of my input field. I have tried it like this:
HTML
<input class="my_border" type="text">
CSS
.my_border {
width:100%;
padding: 20px;
outline: none;
border-width: 0 0 1px 50px;
border-color: #644220;
}
https://jsfiddle.net/9dss92v6/1/
When I use red or any other HEX code, it will work for me. It won't only accept the code #644220. And #644220 is an existing color as you see here.
Not even the RGB code (border-color: rgb(100, 66, 32);) is working.
What is wrong with it?
From MDN:
Note: The default value of border-style is none. This means that if
you change the border-width and the border-color, you will not see the
border unless you change this property to something other than none or
hidden.
Now I assume that browsers are not following this and they show some solid default border by default. [1]
You need to define a style for your border for example solid
border-style: solid;
Demo
[1] Was playing further with this, turns out that it's weird behavior I think from the browsers point of view. If am using a word like red or tomato as color names, it works but still, the color is not the one we expect it to be for example this vs this.
I will update this thread if I got any solid reasoning for this.
Edit 3:
Debugging further, it turns out that the default value Chrome sets is inset for border, i.e, border-style: inset;, which has grayish border which is like a shadow. Hence, your color does render but it mixes with the inset border being set by Chrome defaults. Now am not sure why the color is not overridden by the color declaration you have in your stylesheet, might be a bug.
Add border-style for it:
.my_border {
width:100%;
padding: 20px;
outline: none;
border-width: 0 0 1px 50px;
border-color: #644220;
border-style: solid;
}
You may want to combine the properties of your border in one line like this:
.my_border {
width:100%;
padding: 20px;
outline: none;
border: 10px solid #644220;
}
You can always change the thickness of the border. I made it in 10px so it will be visible.
There is some weird white space showing up on the right side of my website in mobile. I was wondering if there is a CSS trick to add a border to all the html elements within the body of a webpage so that I can figure out which element is extending out and causing the white space on mobile.
Thank you
You can try this CSS snippet:
* { border: 1px solid black; }
Every element should now get a border. Beware, this means everything. Hopefuly it'll help you figure out that white space in your app!
Include that CSS snippet before your CSS files so that it can be overwritten - or after, to force it onto every element.
Try with
* {
outline: 1px solid red;
outline-offset: -1px;
}
* is a global selector, while outline will not mess with your elements positions, it'll just add a 1px red outline
Also make sure you use a CSS reset (usually body has by default 8px margin http://www.w3.org/TR/CSS21/sample.html)
You can resize your window, open the debug console and inspect the elements that might create the issue. Take a look at the Style panel and test-edit the styles until you get it fixed. in Chrome's Console you also have the Emulate option to test your page for different devices.
* {
border-style: 2px 3px solid dashed #3A5FCD;
}
border-style:dotted is not working in firefox
I have read in Here other than property hidden in IE all the properties support is all browser.
But with my code border-style:dotted is not working but if I will give border-style:solid it is working. (if i will just change border-style:solid it will work fine ?? but why?)
Can any explain me why it is happening ?
See Here
Please try to run fiddle in chrome and firefox.
Thanks !!
CSS triangles relies on the border property to render it as a triangle, making it dotted or solid does not matter in the rendering and does therefor not show the border as "dotted" - if you try it on the fiddle you can see changing the color on the border actually changes the entire triangle.
Triangles: http://css-tricks.com/snippets/css/css-triangle/
Maybe try this syntax:
element {
border: [thickness]px [type] [color];
}
Example:
body {
border: 10px solid black;
}
--
body {
border: 20px dotted black;
}
--
body {
border: 30px dashed black;
}
--
body {
border: 40px groove black;
}
UPDATE:
Upon your query, this IS NOT WORKING AND WILL NOT WORK because,
=> You are already applying border as background. If you look closely, border style dotted is stretched to form background as you are using border width property. Don't judge it as background color. You cannot apply border on a border.
=> To make it work, either introduce another pseudo or actual element and make it do that what you wanted to do.
I have a 'special' table on one page, that's borders I would like invisible. I'd like it to differ from standard css rules. Here is a screenshot:
before http://eliteshift.com/redbeancoffee/images/before.jpg
And here is what I want:
after http://eliteshift.com/redbeancoffee/images/after.jpg
I've made a second 'class' called 'award', and I can attribute certain traits (such as width), but I cannot for the life of me remove the boarder.
What's the css for a transparent border?
I've tried:
table.award {
border-collapse: collapse;
border-spacing:0;
width:60%;
}
border-color: transparent; will make it transparent.
border:none; will remove the border, which sounds like what you actually want in this case.
From the sounds of it, do you actually need a border? Would the following work?
table.award{
border: none;
/*other css attributes omited*/
}
I find that border: 2px solid transparent doesn't make it truly transparent all the time.
To make sure that you have a transparent border with a fixed width, use margins instead:
margin: 2px
will do the trick
I have a css class (given below). The border element is working fine in firefox, it creates a 6px white border around the image. But in IE(6) it is not creating any border ie only displays the image. Pls help me out I need to figure it out quickly.
.pimage2 {
background:url(../images/img2.gif) no-repeat;
width: 469px;
height:203px;
border:7px solid #ffffff;
}
Thanks,
Aditya
According to your comment, you're using the CSS on a table cell like this:
<td class="pimage2"></td>
But IE6 won't see this and you won't be able to get the border to show.
To get the border around it, just add a non-breaking space entity in the table cell. Like so:
<td class="pimage2">&‎nbsp;</td>
maybe with black color: ?
border:7px solid #000;
To get the border in the latest css version, you have to write border-style first then the rest of the attributes or design of the border is considered.
border:blueviolet;
border-width: 0.5px;
border-style:solid;
Or, the border will not render.