Whenever I try to set left and right border for an inline-block element in my code, it won't work unless I set all.
border:2px solid black; /* does work */
border:0 2px solid black; /* doesn't work*/
Any idea?
the relevant part of CSS:
#highlights2{
width:640px;
text-align:left;
}
#highlights2 .highlight{
width:211px;
display:inline-block;
height:100px;
background-color:#0dc1d0;
}
#centerhighlight{
border:0 2px solid rgba(0,0,0,0.5);
border:2px solid black;
}
and HTML:
<div id="highlights2"><div class="highlight">asd</div><div style="" class="highlight" id="centerhighlight">fgh</div><div class="highlight">jkl</div></div>
This syntax is not valid for defining borders. If you want different styles for vertical and horizontal borders you need to write it longhand, for example:
border: 2px solid black;
border-top-width: 0;
border-bottom-width: 0;
If you want to use the shorthand for border width, you can use this:
border-width:0 2px;
border-style: solid;
border-color: black;
jsFiddle
Related
I have a Bootstrap list-group that looks like:
This is my CSS:
$border: 1px solid rgba(0, 0, 0, 0.125);
.customer-orders-filters {
.list-group {
box-shadow: $card-box-shadow;
color: $text-color;
font-weight: bold;
.list-group-item {
border-left: none;
border-right: none;
border-bottom: $border;
&:first-child {
border-top: none;
}
&:last-child {
border-bottom: none;
}
&.active {
border-left: 5px solid $blue;
}
}
}
}
As you can see, the border-left bottom is not very right.
I tried to remove the border-bottom on the first-child, then add a border-top to the nth-child(2) but that doesn't work, the border-top is not present. I also tried to set a border-style: outset to the border-bottom of the first-child but without effect.
I would like that the border-left be totally above or totally under the border-bottom, but not half...
Do you know how could I fix it? Should I use a pseudo-element?
Consider using a background and border like below:
.box {
width:200px;
height:50px;
padding-left:5px;
border-bottom:2px solid red;
background:linear-gradient(blue,blue) left/5px 100% no-repeat;
}
<div class="box"></div>
Or the opposite:
.box {
width:200px;
height:50px;
padding-bottom:2px;
border-left:5px solid blue;
background:linear-gradient(red,red) bottom/100% 2px no-repeat;
}
<div class="box"></div>
You can also do with box-shadow:
.box {
width:200px;
height:50px;
padding-left:5px;
border-bottom:2px solid red;
box-shadow:5px 0 0 blue inset;
}
<div class="box"></div>
It looks like the problem is being caused by Bootstrap adding "margin-bottom: -1px;" to the .list-group-item class. Overwriting that rule (and moving the border line to the bottom) seems to fix the issue. (At least in Chrome, I didn't test other browsers.)
Ex:
.list-group-item {
border-left: none;
border-right: none;
border-top: $border !important;
border-bottom: 0;
margin-bottom: 0;
... etc ...
Pen: https://codepen.io/anon/pen/moyOGg
Note that making this change may have other consequences (the Bootstrap devs must have put that -1px margin rule in there for a reason) so you'll need to do some more testing!
Is it possible to recreate a box like this without using background images and only one element?
Ideally, I'd be able to control which corners are darkened by adding a class, so the above image might be class="box dark-top dark-left dark-bottom dark-right". I can darken two by using :before and :after, but am having problems thinking of a good way to darken three or four corners without adding additional markup.
Here's a way to darken all four corners with one element, though I haven't figured out how to darken specific corners yet. But my theory was to have the original border as the dark border, and then /lighten/ the sides of the box with pseudo-elements.
Fiddle: http://jsfiddle.net/KZSLH/
.box {width:236px; height:236px; border:1px solid #333; position:relative;}
.box:before {content:""; display:block; width:200px; height:236px; position:absolute; top:-1px; left:18px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.box:after {content:""; display:block; width:236px; height:200px; position:absolute; top:18px; left:-1px; border-left:1px solid #ccc; border-right:1px solid #ccc;}
It's far from perfect, but this is the only way I could think of to do something like that... You'll want to play around with the border thickness, border radius and which borders are rounded to really have it suit your needs
The only thing I couldn't figure out is how to get the edges of the corners to be sharp rather than tapering off... Maybe someone could contribute that part?
First, start off with two overlapping div elements:
<div id="thick" />
<div id="thin" />
Then, use rounded corners and relative positioning to taper off and create the "bold" corners.
#thick {
position:absolute;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:white;
border:3px solid black;
}
#thin {
position:relative;
top:-2px;
left:-2px;
height:104px;
width:104px;
background-color:white;
border-radius: 15px;
}
Here is a fiddle: http://jsfiddle.net/bGrdA/
And credit to this post for giving me the idea.
I think I figured it out. The key is that there must be content inside of the box in it's own element, which will always be the case my scenario.
Example: http://jsfiddle.net/n7pgP/
The classes that can be added to the box are:
dtl = darken top left
dtr = darken top right
dbl = darken bottom left
dbr = darken bottom right
Some thing this can be tried out for two elements
http://jsfiddle.net/V8jmR/
#content {position:relative;width:400px;height:300px;}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
position:absolute;
width:80px; height: 80px;
border-color:red; /* or whatever colour */
border-style:solid; /* or whatever style */
content: ' ';
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}
Original answer
CSS - show only corner border
The only possibility I know is in using additional elements:
<div class="box">
<span class="darkTopLeft"></span>
<span class="darkTopRight"></span>
<span class="darkBottomLeft"></span>
<span class="darkBottomRight"></span>
</div>
.box {
background-color: #fff;
border: 1px solid #ccc;
height: 100px;
position: relative;
width: 100px;
}
.box > span {
height: 10px;
position: absolute;
width: 10px;
}
.darkTopLeft {
border-left: 1px solid #000;
border-top: 1px solid #000;
left: -1px;
top: -1px;
}
.darkTopRight {
border-right: 1px solid #000;
border-top: 1px solid #000;
right: -1px;
top: -1px;
}
.darkBottomLeft {
bottom: -1px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
left: -1px;
}
.darkBottomRight {
bottom: -1px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
right: -1px;
}
http://jsfiddle.net/cM7xU/
I have a question regarding the div element border
I am trying to create bunch of divs that acts like a table
so
<div class='div'>first</div>
<div class='div'>second</div>
<div class='div'>third</div>
<div class='div'>four</div>
My css is
.div{
border: solid 1px black;
}
All my divs have borders but the problem is all my divs's top and bottom border are 2 px instead of 1px because my css apply 1 px on every div. The second and the third div have thinker border on top and bottom.
I can't really change the class name because it's dynamically generated. Is there anyway to work around this issue?
Thanks a lot!
Remove the top border from every element except of the first one.
.div {
border-style: solid;
border-color: black;
border-width: 0 1px 1px 1px;
}
.div:first-child {
border-width: 1px;
}
Here's an example of the difference.
did you tryed write something like this :
.div {
border:1px solid black;
border-bottom:0;
}
.div:last-child {
border-bottom:1px solid black;
}
Try to add this to your styles.
<style>
.div{
border: solid 1px black;
border-bottom:none;
}
.div2{
border: solid 1px black;
}
</style>
Then add this to your body:
<div class='div'>first</div>
<div class='div'>second</div>
<div class='div'>third</div>
<div class='div2'>four</div>
I often find myself into this:
.class {
border-top:1px dashed #0000000;
border-bottom:1px dashed #0000000;
}
Is there a way to one-line that?
I tried this but doenst' work:
.class {
border:1px 0 dashed #0000000;
}
No but you could make it simpler to maintain by using:
.my_class {
border: 1px dashed #000;
border-right: none;
border-left: none;
}
That what you only need to change one line.
You can use properties for every "side" (top, right, bottom, left) for each single border property, in your case:
.class{
border-color: #000;
border-width: 1px 0;
border-style: dashed;
}
Note that you can specify every property for every side, for example:
.class{
border-color: #000 green blue yellow;
border-width: 1px 2px 3px 4px;
border-style: dashed solid dotted solid;
}
Nope, there's no one-liner for that in pure CSS - you can use the border shorthand only for all four sides at once.
EDIT: Just to be completely clear. My primary interest is NOT IE6 but whatever solution I use does need to work in IE6 without looking completely hideous.
So a solution in which the rounded corners ended up square in IE6 would be fine.
A solution where the rounded corners ended up in random locations in IE6 would not be OK.
I have used this tool/technique http://www.spiffycorners.com/index.php?sc=spiffy&bg=FFFFFF&fg=000000&sz=5px to produce some simple rounded corner divs.
Can anyone tell me how to adapt the CSS output by this tool so that the div only has a border (and no fill) ? At the moment you get a solid block of colour (black in this example).
I'm open to completely different techniques but must be imageless and must degrade reasonably for IE6 ('reasonably' includes no rounded corners but still get a box)
I've tried channging the 'background-color' to 'inherit' but then I lost the left and right hand sides of the box.
Sample css/html follows:
<style type="text/css">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#000000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #919191;
border-right:1px solid #919191;
background:#3f3f3f}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
background:#303030}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #303030;
border-right:1px solid #303030;}
.spiffy4{
border-left:1px solid #919191;
border-right:1px solid #919191}
.spiffy5{
border-left:1px solid #3f3f3f;
border-right:1px solid #3f3f3f}
.spiffyfg{
background:#000000}
</style>
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
<!-- content goes here -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
jQuery UI does a great job at only applying the radius to the border, using native CSS:
/* Individual Corners */
.ui-corner-tl {
-moz-border-radius-topleft: 4px/*{cornerRadius}*/;
-webkit-border-top-left-radius: 4px/*{cornerRadius}*/;
border-top-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-tr {
-moz-border-radius-topright: 4px/*{cornerRadius}*/;
-webkit-border-top-right-radius: 4px/*{cornerRadius}*/;
border-top-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-bl {
-moz-border-radius-bottomleft: 4px/*{cornerRadius}*/;
-webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/;
border-bottom-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-br {
-moz-border-radius-bottomright: 4px/*{cornerRadius}*/;
-webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/;
border-bottom-right-radius: 4px/*{cornerRadius}*/;
}
/* All Corners */
.ui-corner-all {
-moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/;
border-radius: 4px/*{cornerRadius}*/;
}
Then you can set border or border-color to apply only a border to it.
See the jQuery-UI Themes.css file for more styles.
Currently achieving the border radius is only mastered in FireFox (-moz-border-radius: 5px;) and in Chrome (-webkit-border-radius: 5px;).
There are scripts to implement the same effect in IE, however, they are not that great. Mainly when it comes to patterns as background-images.
Lets take an example, that you got a pattern as background-image and solid block container with rounded borders on top. The script will produce the borders indeed, but the corners will be solid color and not transparent.
However, there is a way! Its called CSS3 PIE. Learning to use it at first is a nightmare. However, if you get it working..it will be the ultimate solution! CSS3 PIE will add radius to your corners and keep the corner-background transparent. Also, it works great in IE6.
Now, as I understand.. You simply want a border and the container not filled. Well, try the demo on the bottom, in FireFox or Chrome. Is this what you meant? If so, then still CSS3 PIE, is your best bet!
<style>
#demo_container {
/* The actual trick: */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* For making demo more fun: */
border: 2px solid black;
padding: 10px;
margin: 10px;
}
</style>
<div id="demo_container">Stack Overflow</div>
This is the closest I could get :P
.spiffy1 {
margin-left: 4px;
margin-right: 4px;
padding-left: 1px;
padding-right: 1px;
border-left: 1px solid #919191;
border-right: 1px solid #919191;
background: #3F3F3F;
}
.spiffy2 {
margin-left: 2px;
margin-right: 2px;
padding-right: 1px;
padding-left: 1px;
border-left: 2px solid #303030;
border-right: 2px solid #303030;
background: #303030;
}
.spiffy3 {
margin-left: 1px;
margin-right: 1px;
border-left: 1px solid #303030;
border-right: 1px solid #303030;
}
.spiffy4 {
border-left: 1px solid #919191;
border-right: 1px solid #919191;
}
.spiffy5 {
border-left: 1px solid #3F3F3F;
border-right: 1px solid #3F3F3F;
}
<div style=" height:100px; border: 1px solid black; border-width: 0px 1px;">
Seriously... use border-radius! I don't think it's a good thing to have a lot of code, only to have a great effect for an ancient browser...