This question already has answers here:
CSS gradient border not showing correctly
(3 answers)
Closed 2 years ago.
I'm trying to use an image to show in the right border of a div but is not shown
border-image: url("/images/products/line.png");
border-style: solid;
border-width: 0px 3px 3px 0px;
You may have to set the border as transparent:
border-color: transparent;
And don't forget to set the position of the image. Something like:
border-image:url("/images/products/line.png") 30 30 repeat;
Related
This question already has answers here:
HTML border thickness on zoom
(2 answers)
Closed 4 years ago.
When you change page zoom in range 67% - 150% all thin lines on the page will be rendered differently depending on how browser decides to average a particular non-integer value.
Codepen: https://codepen.io/anon/pen/gewZYm
Is there a way to make all those 3 horizontal lines in the codepen to always get averaged down to 1px instead of 0px or 2px so they always look the same?
Code:
<div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
.line {
height: 1px;
margin: 40px;
background-color: grey;
}
I just figured out how to do it.
If you need a thin line / border you have to use border-width: thin which would consistently be rendered as 1px:
To create a line:
border-style: solid;
border-width: thin 0 0 0;
To create a border:
border-style: solid;
border-width: thin;
You can also use medium and thick values (https://www.w3schools.com/cssref/pr_border-width.asp)
Updated codepen:
https://codepen.io/anon/pen/dmpwzp
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 6 years ago.
While following this tutorial, this piece of code is claimed to draw an arrow, but was never explained properly.
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
<div class="tooltip">Sample text</div>
Can anybody please explain how's it doing that?
The trick is in the border color and width. Imagine a box with zero height and width, just the borders, those borders are meeting in the exact center. If you draw one border with a color (#333 in this case) and leave the rest as transparent, you get an arrow.
The technique is explained further on CSS Tricks: https://css-tricks.com/snippets/css/css-triangle/#article-header-id-2
This question already has answers here:
CSS Double Border with outer border thicker than inner border
(5 answers)
Closed 8 years ago.
Is it possible with a single CSS?
Having a double border, the inner border is thin while the outer border is thick?
Having two different element with different border thickness is simple.
But I'm trying to find a way to make it a single element.
If you can use any other CSS property then you can use the following code.
border: double 3px black;
outline: solid 1px black;
It will produce a 1px inner and 2px outer "border"
Something like below??
You can use outline
Outlines allow both a border and an outline to be applied to a single element.
FIDDLE DEMO
<div class="border"></div>
CSS
.border {
border: 1px double #000;
outline: 5px solid #699;
outline-offset: -9px;
width:200px;
height:200px;
}
I have this site here:
http://artendijen.com/susan_dev/
and I have a box-shadow around my nav box, I am looking to have the shadow a bit smaller, a color that looks more like a shadow and all around, except for the left side, just the top, bottom, and right side. Is this possible?
box-shadow: 10px 10px 5px #000;
The syntax of the box-shadow is like this (ignoring inset and spread):
box-shadow: <offset-x> <offset-y> <size> <color>;
So to have the shadow smaller, decrease the size.
To have the shadow at a different position, change the offsets.
For a more realistic color try a more transparent color.
This for example would give a result like you want it:
box-shadow: 5px 0px 3px rgba(0,0,0,.5);
This question already has answers here:
Creating rounded corners using CSS [closed]
(21 answers)
Closed last month.
I was wondering if it was possible to create a double rounded border without nesting DIV's?
See my example here: http://jsfiddle.net/eXDjL/
The first box is rounded, but the ouline stays square, the second box has no rounded corners but shows the borders how I want them.
I know there is a -moz-outline-radius property, but anything for the other browsers?
If not I guess I'll just stick with two divs.
To mimic different color borders you can use box-shadow - http://jsfiddle.net/eXDjL/3/
.genyx_content_full {
background-color:#f7f7f7;
border: #fff 1px solid;
padding: 10px;
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: 0px 0px 0px 1px #dedede;
}