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;
}
Related
I can change the top, left, right and bottom of borders using the setStyleSheet funcion:
self.button1.setStyleSheet("""border-bottom: 1px solid #654321; border-top: 1px solid #123456""")
and this creates a button like so:
However is it possible to create borders like the one below using qss stylesheets:
Where the bottom border in only not starting at the very edge.
Well, it is possible, but only whenever the following aspects are respected and considered:
both vertical borders are always explicitly hidden (border-left and border-right are set to none);
the border radius is only specified for the bottom corners, and it only sets the horizontal radius, while leaving the vertical one to 0;
this is a "hack" that specifically uses geometry aspects and only works if the above are respected;
bottomMargin = 24
self.button1.setStyleSheet("""
QAbstractButton {{
border: 1px solid black;
border-left: none;
border-right: none;
border-bottom-left-radius: {margin}px 0;
border-bottom-right-radius: {margin}px 0;
}}
""".format(margin=bottomMargin)
I have been searching in goole how to create and arrow and box with css only. I have found an almost perfect example here:-
http://dabblet.com/gist/4639593
How can I change this code so the arrow points left and not right?
I have tried a few things but just get a diamond shape pointing left!
Thanks
change .shape:after's margin to -24px 220px
remove border-top & border-right for .shape:after
add the following borders for .shape:after border-bottom: solid 1px #ccc; & border-left: solid 1px #ccc;
here the final result: http://dabblet.com/gist/5648799
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 using bootstrap to drawing a well. In this well, I create two span6 and would like to draw a vertical divider between these two column. How can I achieve my goal?
Draw the left border on all, but first column:
.well [class^="span"] + [class^="span"] {
margin-left: -1px; /* compensate border width */
border-left: 1px solid #e3e3e3;
}
Alternatively, CSS columns can be used (prefixes required):
.well.col {
columns: 2;
column-gap: 20px;
column-rule: 1px solid #e3e3e3;
}
If you have never use it before, you should check my tutorial on CSS columns.
The selected answer breaks if your elements take up the entire width because the border adds 1px too many! To combat this you can adjust the margin to account for the border.
.line-right {
margin-right: -1px;
border-right: 1px solid black;
}
If you'd like a bigger border, just be sure to account for it in the margin!
You can always use an HTML <hr> tag.
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;
}