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;
}
Related
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;
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'm looking at making a trapezium with a box shadow that's 10px wider at the top than the bottom. In the past I've made a trapezium as outlined in the following jsfiddle, but you'll notice that if I put a box-shadow onto the element it boxes the outerWidth in a rectangle, rather than putting a shadow on the slanted border:
#trapezium {
margin:20px auto;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
box-shadow:0 0 10px #333;
}
http://jsfiddle.net/YhePf/8/
My initial thoughts would be to use something along the lines of:
-webkit-transform:perspective(100) rotateX(1deg);
Something like that. While this certainly begins to resolve the issue, I'm not sure what the number 100 refers to in 'perspective', and how I could calculate a formula that would make sure the top width was precisely 10px wider than the bottom, regardless of how high or wide this element is.
Any tips? Or a third option to pull this off?
What you've built isn't a trapezoid (aka trapezium) -shaped element; it's a rectangle-shaped element where the border styling creates the appearance of a trapezoid. This is why the box-shadow is rectangular.
Using the proprietary -webkit-transform property wouldn't change the shape of the actual element.
To create a truly non-rectangular element, you'll need to use SVG. See Multi-Shaped CSS Layers \ Non-rectangular CSS Layer or non-rectangular hoverable area.
I'm seeing a rendering issue for a 2px dotted border similar to CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome but on desktop Safari and Chrome. I tried several widths and it happens in all of them
This is a sample:
the vertical line ending has the same issue but it's out of the picture.
Sample:
http://jsfiddle.net/bcdQQ/
This issue happens if the width is not divisible by the border-width.
This works:
http://jsfiddle.net/bcdQQ/5/ (i made it a little bit bigger, for better sight)
#prodpre {
border-bottom: #555 5px dotted;
height: 20px;
margin: 0px 0px 2px 0px;
padding-bottom: 10px;
width: 505px;
}
So, the only possibility to catch this issue, would be a javascript solution, which corrects the width of the div, so it is divisible by the border-width (cause it is dynamically in your example).
could you put it in a smaller container div with overflow hidden?