I'm trying to use this CSS border hack to create triangle shapes. They work, but I can't get them vertically centered in their container.
I would use the black triangle entity but it looks different in every font and browser and has weird line height AND isn't vertically centred either. (Why do they even bother making these characters if you can't use them?)
Anyway you can see the Codepen here.
Arrows CSS:
.ico_arrow_left {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-right: 0.75em solid #CCC;
}
.ico_arrow_right {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-left: 0.75em solid #CCC;
}
Other notes: I'd prefer not to affect the height of any of the containers. Only evergreen browsers needed.
The problem arises due the line-height you have set. However I've edited your codepen and here is the new one, also I've not deleted your original line-height you have set.
With the increase in line-height, the .btn elements also inherited the line-height and were not aligned properly in the middle. I have added a few changes to your codepen which I have made clear by commenting on the line.
http://codepen.io/anon/pen/MwBqyp
Related
On my site I have added a border-left to the sidebar. The issue I have is that this border is very close to the text to the left of it and I would like to move the border slightly to the right. I have tried various ways of doing this, but all were unsuccessful.
.blog-sidebar {
width: 250px;
border-left: 1px solid #000000;
}
Have you tried adding a margin on the left-hand side? For example:
.blog-sidebar {
width: 250px;
border-left: 1px solid #000000;
margin-left: 20px;
}
That should give you some space between the border and the content on the left.
For reference, see the CSS box model
http://www.w3schools.com/css/css_boxmodel.asp
I have some table, based on divs. When table row is hovered, i want to add borders to the top and bottom of it. But in spite of box-sizing: border-box, my block becomes 2 pixels bigger. Row can't have fixed height.
Here is example: https://jsfiddle.net/j4nwdju6/
I can't just add invisible or transparent borders, because it will spawn whitespaces between rows.
You can offset this by adjusting the top & bottom margins on the hovered state:
JS fiddle
.row:hover {
background: yellow;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin: -1px 0;
}
Add border to your rows so that it wont jump while hovering
.row {
display: flex;
border:1px solid white;
}
Updated fiddle : https://jsfiddle.net/j4nwdju6/1/
A really simple hack would be to add margin-top: -2px; to the :hover styles, so that the position doesn't change: JSFiddle.
You may add a transparent border in .row like this
.row {
display: flex;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
This will not affect the height of div on hover.
UPDATE
To remove white space b/w rows add margin-top:-2px . Check this fiddle.
I have an error with my HTML/CSS that I would like to solve.
I have multiple links setup as divs. Their width is 10%. As so, all 10 Divs fit inside the parent div. I would like the links (10 divs) to have a border to distinguish them apart. If I try to add a border at all, the last div jumps out of the parent div. Is there a way to fix this? I tried using overflow:auto, didn't work. Mostly what Im looking to find is a way to make a border that goes inside the div, if that's possible that is.
body {
background-color: #574B59;
}
.header {
height: 87px;
width: auto;
border: 4px solid black;
margin: 20px;
background-color: white;
text-align:center;
font-size: 20px;
}
.links {
height: 25px;
width: auto;
border: 3px solid black;
margin: auto;
}
.body{
}
.subheader{
}
.linkss {
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
Look at .Linkss
Either reduce the width of each div by the border-width (multiplied by 2) or you can apply a fake border by using the box-shadow property with a blur of 1px.
box-shadow: 0px 0px 1px #000000;
The reason is 10% plus even a 1px border is larger than 10% thus, too large for 10 to fit. An easy solution it to make a border on something inside the div, and make that fill the whole parent. But please post some code so we may provide a more better solution.
Add this to the CSS for the divs:
.linkss {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
Or you can set the width to calc(10% - 2px).
.linkss {
-moz-box-sizing: border-box;
box-sizing: border-box;
/* plus all your other properties here*/
}
One solution is to set a negative margin of 1 pixel on your linkss see example below
.linkss {
margin: 0 -1px 0 -1px;
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
I have done this before but sometimes depending you on your layout or design this may need a little tweaking, let me know if this helped. Happy fridays!
One fix for layout issues like this is to apply the border to an element within the div, in your case, the <a> element.
.column_div{width:10%; float:left;}
.column_div a{display:block; border:2px solid #f00;}
Tested in FireFox.
The other solution would be to reduce your 10% width and apply the border as a percentage width; but trying to get it the same on the top & bottom would then become a headache.
I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what I want.
I would rather have this border be -1px from the edge of the div. The div itself is 100px x 100px, and if I add a border, then I have to do some mathematics to make the border appear.
Is there any way that I can make the border appear, and ensure the box will still be 100px (including the border)?
Set box-sizing property to border-box:
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid #f00;
background: #00f;
margin: 10px;
}
div + div {
border: 10px solid red;
}
<div>Hello!</div>
<div>Hello!</div>
It works on IE8 & above.
You can also use box-shadow like this:
div{
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
}
Example here: http://jsfiddle.net/nVyXS/ (hover to view border)
This works in modern browsers only. For example: No IE 8 support.
See caniuse.com (box-shadow feature) for more info.
Probably it is belated answer, but I want to share with my findings. I found 2 new approaches to this problem that I have not found here in the answers:
Inner border through box-shadow css property
Yes, box-shadow is used to add box-shadows to the elements. But you can specify inset shadow, that would look like a inner border rather like a shadow. You just need to set horizontal and vertical shadows to 0px, and the "spread" property of the box-shadow to the width of the border you want to have. So for the 'inner' border of 10px you would write the following:
div{
width:100px;
height:100px;
background-color:yellow;
box-shadow:0px 0px 0px 10px black inset;
margin-bottom:20px;
}
Here is jsFiddle example that illustrates the difference between box-shadow border and 'normal' border. This way your border and the box width are of total 100px including the border.
More about box-shadow:here
Border through outline css property
Here is another approach, but this way the border would be outside of the box. Here is an example.
As follows from the example, you can use css outline property, to set the border that does not affect the width and height of the element. This way, the border width is not added to the width of an element.
div{
width:100px;
height:100px;
background-color:yellow;
outline:10px solid black;
}
More about outline: here
Yahoo! This is really possible. I found it.
For Bottom Border:
div {box-shadow: 0px -3px 0px red inset; }
For Top Border:
div {box-shadow: 0px 3px 0px red inset; }
You can use the properties outline and outline-offset with a negative value instead of using a regular border, works for me:
div{
height: 100px;
width: 100px;
background-color: grey;
margin-bottom: 10px;
}
div#border{
border: 2px solid red;
}
div#outline{
outline: 2px solid red;
outline-offset: -2px;
}
Using a regular border.
<div id="border"></div>
Using outline and outline-offset.
<div id="outline"></div>
Although this question has already been adequately answered with solutions using the box-shadow and outline properties, I would like to slightly expand on this
for all those who have landed here (like myself) searching for a solution for an inner border with an offset
So let's say you have a black 100px x 100px div and you need to inset it with a white border - which has an inner offset of 5px (say) - this can still be done with the above properties.
box-shadow
The trick here is to know that multiple box-shadows are allowed, where the first shadow is on top and subsequent shadows have lower z-ordering.
With that knowledge, the box-shadow declaration will be:
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
div {
width: 100px;
height: 100px;
background: black;
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
}
<div></div>
Basically, what that declaration is saying is: render the last (10px white) shadow first, then render the previous 5px black shadow above it.
outline with outline-offset
For the same effect as above the outline declarations would be:
outline: 5px solid white;
outline-offset: -10px;
div {
width: 100px;
height: 100px;
background: black;
outline: 5px solid white;
outline-offset: -10px;
}
<div></div>
NB: outline-offset isn't supported by IE if that's important to you.
Codepen demo
Use pseudo element:
.button {
background: #333;
color: #fff;
float: left;
padding: 20px;
margin: 20px;
position: relative;
}
.button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #f00;
}
<div class='button'>Hello</div>
Using ::after you are styling the virtual last child of the selected element. content property creates an anonymous replaced element.
We are containing the pseudo element using absolute position relative to the parent. Then you have freedom to have whatever custom background and/or border in the background of your main element.
This approach does not affect placement of the contents of the main element, which is different from using box-sizing: border-box;.
Consider this example:
.parent {
width: 200px;
}
.button {
background: #333;
color: #fff;
padding: 20px;
border: 5px solid #f00;
border-left-width: 20px;
box-sizing: border-box;
}
<div class='parent'>
<div class='button'>Hello</div>
</div>
Here .button width is constrained using the parent element. Setting the border-left-width adjusts the content-box size and thus the position of the text.
.parent {
width: 200px;
}
.button {
background: #333;
color: #fff;
padding: 20px;
position: relative;
}
.button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #f00;
border-left-width: 20px;
}
<div class='parent'>
<div class='button'>Hello</div>
</div>
Using the pseudo-element approach does not affect the content-box size.
Depending on the application, approach using a pseudo-element might or might not be a desirable behaviour.
I know this is somewhat older, but since the keywords "border inside" landed me directly here, I would like to share some findings that may be worth mentioning here.
When I was adding a border on the hover state, i got the effects that OP is talking about. The border ads pixels to the dimension of the box which made it jumpy.
There is two more ways one can deal with this that also work for IE7.
1)
Have a border already attached to the element and simply change the color. This way the mathematics are already included.
div {
width:100px;
height:100px;
background-color: #aaa;
border: 2px solid #aaa; /* notice the solid */
}
div:hover {
border: 2px dashed #666;
}
2 )
Compensate your border with a negative margin. This will still add the extra pixels, but the positioning of the element will not be jumpy on
div {
width:100px;
height:100px;
background-color: #aaa;
}
div:hover {
margin: -2px;
border: 2px dashed #333;
}
11 Years Later but heres the answer:
Just use outline:
outline: 0.2vw solid red;
I hope i can help someone who sees this question also 11 Yeas Later.
for consistent rendering between new and older browsers, add a double container, the outer with the width, the inner with the border.
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
this is obviously only if your precise width is more important than having extra markup!
If you use box-sizing: border-box means not only border,
padding,margin, etc. All element will come inside of the parent
element.
div p {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 150px;
height:100%;
border: 20px solid #f00;
background-color: #00f;
color:#fff;
padding: 10px;
}
<div>
<p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>
Best cross browser solution (mostly for IE support) like #Steve said is to make a div 98px in width and height than add a border 1px around it, or you could make a background image for div 100x100 px and draw a border on it.
You can look at outline with offset but this needs some padding to exists on your div. Or you can absolutely position a border div inside, something like
<div id='parentDiv' style='position:relative'>
<div id='parentDivsContent'></div>
<div id='fakeBordersDiv'
style='position: absolute;width: 100%;
height: 100%;
z-index: 2;
border: 2px solid;
border-radius: 2px;'/>
</div>
You might need to fiddle with margins on the fake borders div to fit it as you like.
A more modern solution might be to use css variables and calc. calc is widely supported but variables is not yet in IE11 (polyfills available).
:root {
box-width: 100px;
border-width: 1px;
}
#box {
width: calc(var(--box-width) - var(--border-width));
}
Although this does use some calculations, which the original questions was looking to avoid. I think this is an ok time to use calculations as they are controlled by the css itself. It also has no need for additional markup or misappropriating other css properties that may be needed later on.
This solution is only really useful if a fixed height isn't needed.
One solution I didn't see mentioned above is the case where you have padding on your input, which I do 99% of the time. You can do something along the lines of...
input {
padding: 8px;
}
input.invalid {
border: 2px solid red;
padding: 6px; // 8px - border or "calc(8px - 2px)"
}
What I like about this is that I have the full menu of border + padding + transition properties for each side.
I have a table TD and on the right of it I want to add a 1 pixel border, so I've done this:
table td {
border-right:1px solid #000;
}
It works fine but the problem is that the border's height takes the total TD's height.
Is there a way to set the height of the border?
I have another possibility. This is of course a "newer" technique, but for my projects works sufficient.
It only works if you need one or two borders. I've never done it with 4 borders... and to be honest, I don't know the answer for that yet.
.your-item {
position: relative;
}
.your-item:after {
content: '';
height: 100%; //You can change this if you want smaller/bigger borders
width: 1px;
position: absolute;
right: 0;
top: 0; // If you want to set a smaller height and center it, change this value
background-color: #000000; // The color of your border
}
No, there isn't. The border will always be as tall as the element.
You can achieve the same effect by wrapping the contents of the cell in a <span>, and applying height/border styles to that. Or by drawing a short vertical line in an 1 pixel wide PNG which is the correct height, and applying it as a background to the cell:
background:url(line.png) bottom right no-repeat;
Yes, you can set the line height after defining the border like this:
border-right: 1px solid;
line-height: 10px;
For td elements line-height will successfully allow you to resize the border-height as SPrince mentioned.
For other elements such as list items, you can control the border height with line-height and the height of the actual element with margin-top and margin-bottom.
Here is a working example of both:
http://jsfiddle.net/byronj/gLcqu6mg/
An example with list items:
li {
list-style: none;
padding: 0 10px;
display: inline-block;
border-right: 1px solid #000;
line-height: 5px;
margin: 20px 0;
}
<ul>
<li>cats</li>
<li>dogs</li>
<li>birds</li>
<li>swine!</li>
</ul>
Building on top of #ReBa's answer above, this custom-border class is what worked for me.
Mods:
working with border instead of backaground-color since background-color is not consistent.
Setting height & top of the properties of :after in such a way that the total comes up to 100% where bottom's value is implicit.
ul {
list-style-type: none;
display: flex;
flex-direction: row;
}
li {
padding: 10px;
}
.custom-border {
position: relative;
}
.custom-border:after {
content: " ";
position: absolute;
border-left: 1px #6c757d solid;
top: 35%;
right: 0;
height: 30%;
margin-top: auto;
margin-bottom: auto;
}
<ul>
<li class="custom-border">
Hello
</li>
<li class="custom-border">
World
</li>
<li class="custom-border">
Foo
</li>
<li class="custom-border">Bar</li>
<li class="custom-border">Baz</li>
</ul>
Good Luck...
No, you cannot set the border height.
This will add a centered border to the left of the cell that is 80% the height of the cell. You can reference the full border-image documentation here.
table td {
border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}
Just like everyone else said, you can't control border height.
But there are workarounds, here's what I do:
table {
position: relative;
}
table::before { /* ::after works too */
content: "";
position: absolute;
right: 0; /* Change direction for a different side*/
z-index: 100;
width: 3px; /* Thickness */
height: 10px;
background: #555; /* Color */
}
You can set height to inherit for the height of the table or calc(inherit - 2px) for a 2px smaller border.
Remember, inherit has no effect when the table height isn't set.
Use height: 50% for half a border.
Demo
table {
border-spacing: 10px 0px;
}
.rightborder {
border-right: 1px solid #fff;
}
Then with your code you can:
<td class="rightborder">whatever</td>
Hope that helps!
Currently, no, not without resorting to trickery. borders on elements are supposed to run the entire length of whatever side of the element box they apply to.
.main-box{
border: solid 10px;
}
.sub-box{
border-right: 1px solid;
}
//draws a line on right side of the box.
later add a margin-top and margin-bottom.
i.e.,
.sub-box{
border-right: 1px solid;
margin-top: 10px;;
margin-bottom: 10px;
}
This might help in drawing a line on the right-side of the box with a gap on top and bottom.
table td {
border-right:1px solid #000;
height: 100%;
}
Just you add height under the border property.