I have a box where I've created an "etched" vertical line by placing a #bbb line and an #fff line next to each other with the CSS:
div#product_details_separator {
height:100px;
width:0px;
border-left:1px solid #bbb;
border-right:1px solid #fff;
Etched Vertical Line:
Does anyone know how I can give the entire border around the box this same etched effect?
You can apply box-shadow to achieve that etched effect. See the DEMO
CSS
.box {
border: 1px solid #fff;
box-shadow: 0 0 0 1px #bbb;
}
What you're trying to do sounds kind of like the inset border-style, that may be worth looking into. To add a second layer of border, however, you can use the outline property. This allows you to specify an outline that goes directly around the border.
border: 1px solid #bbb;
outline: 1px solid #fff;
You have several interesting (and seldom used) styles to set on a border w3c doc
Combining them, you can achieve several interesting variations on your request
Notice that the grayed color is calculated automatically. See also the 4th example, to achieve special effects different from the standard ones
div {
width: 100px;
height: 80px;
display: inline-block;
}
.one {
border: groove 20px lightblue;
}
.two {
border: ridge 20px lightgreen;
}
.three {
border: inset 20px tomato;
}
.four {
border-top: groove 20px tomato;
border-left: groove 20px tomato;
border-right: ridge 20px tomato;
border-bottom: ridge 20px tomato;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
Related
How do I make the link outline (blue) conform to the CSS shape? I mean the outline should be in the same shape as the link border.
Would you mind linking, or helping me find the right words to describe it, so I can properly research it, or maybe some basic fixes?
You can use box-shadow (Hover to see it )
button {
width: 200px;
height: 100px;
background: cornflowerblue;
border-radius: 5px 25px 5px 25px;
border-bottom: 2px solid black;
border-top: 2px solid black;
border-left:0;
border-right:0;
outline: 0;
}
button:hover {
box-shadow: 0 0 0 5px orange;
}
<button></button>
I think your referring to the outline property. I think this would helps on your problem :)
button:focus{
outline: none;
}
Is it possible to somehow create a double border in CSS, with these 2 added customizations:
One line is slightly thicker than the other
There is a small gap between the two lines
This is the kind of border I need:
EDIT:
Guys, I cannot make any changes to my existing HTML code. I can only apply CSS for the existing HTML code. As far as you're concerned, consider I have a div named sampleDiv, and I want to apply the border on the top side of this div (see below).
Secondly, if you're using any technique other than border, please note that I only want to apply the this specialized border on the top side of my sampleDiv div.
pure CSS & Cross browser - the thickness and spacing can be customized
After your latest Edit: this is a Working Fiddle
without changing the markup, top border only.
your HTML:
<div class="sampleDiv">
some content
</div>
new CSS
.sampleDiv
{
border-top: 2px solid black;
padding-top: 1px;
}
.sampleDiv:before
{
content: '';
border-top: 1px solid black;
display: block;
width: 100%;
}
If you are allowed to change the DOM:
one line anywhere in the markup: Working Fiddle
HTML:
<div class="SpecialLine"></div>
CSS:
.SpecialLine
{
border-top: 2px solid black;
height: 2px;
border-bottom: 1px solid black;
}
full container border: Working Fiddle
HTML:
<div class="SpecialContainer">
<div class="Content">
here goes the content
<div>
</div>
CSS
.SpecialContainer
{
border: 2px solid black;
padding: 1px;
}
.Content
{
border: 1px solid black;
}
There are various ways you can have multiple borders. One way is to use box-shadow, you can specify multiple box shadows to create the effect you want.
Example
box-shadow: 0 0 0 5px black, 0 0 0 7px red;
Update
I have created a jsFiddle to show you how you can create your borders using box-shadow
Fiddle
There's not a specific property or something for this,but you can easily create one.Something like this:
html:
<div id="wrapper">
<div id="middle">put whatever you want here</div>
</div>
css:
#wrapper{
border: 3px solid black;
padding: 1px;
}
#middle{
border: 1px solid black;
}
here's a js fiddle link:
http://jsfiddle.net/roostaamir/GEqLJ/
UPDATE:
so I saw your edit,and here's the first thing that came to my mind(if you have the width of your sampleDiv this will work):
#sampleDiv
{
border-top: 3px solid black;
width: 500px; //this is an example
position: relative;
}
#sampleDiv:before
{
content: "";
display: block;
position: absolute;
top: 1px;
width: 500px;
height: 1px;
background-color: black;
}
Your div: <div class="framed" />
Simple CSS:
.framed {
border: solid 2px #ccc;
box-shadow: 0 0 0 14px #ccc;
outline: solid 8px #fff;
}
Demo Fiddle: http://jsfiddle.net/uRFsD/
The easiest way to do this would be wrapping the main div in a container div for the second line like so:
.inner {
border: 2px solid #000;
}
.outer {
border: 1px solid #000;
padding: 1px;
}
It's not particularly semantic but it's an easy way to get the job done. You could also use border-image if being semantic is important, but it's more complicated. I guess you could also use both border (inner) and outline (outer) on the same div, but that is not ideal since outline isn't technically part of the box model at all as far as I understand it.
HTML
<div></div>
<div></div>
CSS :
div{
display: block;
background-color: #000;
}
div:nth-child(1){
padding: 2px 0;
}
div:nth-child(2){
margin-top: 1px;
padding: 1px 0;
}
Check this fiddle
May be something like below:
div {
border-top: 3px solid #00f;
position: relative;
z-index: 10;
margin: 10px;
width: 200px;
}
div:before {
content: "";
border-top: 1px solid #f00;
position: absolute;
top: 0;
left: 0;
right:0;
z-index: -1;
}
http://jsbin.com/iWiGEzU/1/edit?html,css,output
Like
demo
css
.outline {
border-top: 2px solid #000;
border-bottom:1px solid #000;
height:3px;
}
CSS
.doubleBorder
{
border: 4px solid black;
padding: 2px;
}
.doubleBorder>div {
border: 2px solid black;
}
HTML
<div class="doubleBorder">
<div>
<p>Hello</p>
<p>World</p>
</div>
</div>
Working demo
Not in pure CSS as far as I know. Instead you could add in a div element to your HTML, set its width to the one below it and set it's border-top, thickness, margin properties to be meet your thicker border requirement.
Currently I have a 1px border that wraps around each job title that I post. The issue that I have is that on the bottoms where i placed the red logo the 1 px's overlap making a thicker line (2px) than the rest. How can I fix this but still have a full border when each page is opened. Thanks for taking a look.
http://jobspark.ca/job-listings/
UPDATED CSS
article .post {
border: 1px solid #e3e3e3;
border-top: none;
}
article.article-index-null .post,
article.article-index-1 .post {
border-top: 1px solid #e3e3e3;
}
UPDATE:
Only thing is now when you click and open a page "parts person" for example the top border is missing. http://jobspark.ca/job-listings/2013/6/3/wellsite-trailer-energy-services-technician
Just remove the top border from each post except the first one:
article .post {
border: 1px solid #e3e3e3;
border-top: none;
}
article .post:first-child {
border-top: 1px solid #e3e3e3;
}
Edit: Because your html structure has a series of article elements with one .post in each (instead of a series of .post elements inside an article, as I'd assumed), the above code won't work, but the principle is the same. You can't use article:first-child because there is another sibling element that is the first child, but since you have given the first article a specific class name, you can use that, as follows:
article .post {
border: 1px solid #e3e3e3;
border-top: none;
}
article.article-index-1 .post {
border-top: 1px solid #e3e3e3;
}
Second Edit: Since you are reusing the same html on for both item view and list view but don't want the top border removed in item view, do the following:
article .post {
border: 1px solid #e3e3e3;
}
.view-list article post {
border-top: none;
}
.view-list article.article-index-1 .post {
border-top: 1px solid #e3e3e3;
}
Alternatively, since in your unit view you have given the article the class "article-index-null" you could also do the following:
article .post {
border: 1px solid #e3e3e3;
border-top: none;
}
article.article-index-null .post,
article.article-index-1 .post {
border-top: 1px solid #e3e3e3;
}
Either one should work.
Change to this:
article .post {
padding: 12px 16px;
border: 1px solid #e3e3e3;
border-bottom: none;
background: white;
}
And add this:
article .post:last-child {
border-bottom: 1px solid #e3e3e3;
}
There are a few ways to do this. i would wrap the entire articles section with a <div> that has only a 1px top border, no padding. then every article would only need left, right and bottom borders to achieve the look you are going for.
article .post {
padding: 12px 16px;
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
background: white;
}
Instead of using border what about using border-left border-right and border top ?
Seems like this is solving your issue.
I'm using the following code for the 2 borders of different colors, and space between the borders. I'm using the property outline-offset for the space between the borders. However it is not supported in IE (not even IE9).
Is there any alternate solution which works in the IE as well, without adding another div in the html.
HTML:
<div class="box"></div>
CSS:
.box{
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid green;
outline:2px solid red;
outline-offset: 2px;
}
The height and width is not fixed, i have just used for the example.
JSFiddle:
http://jsfiddle.net/xyXKa/
Here are two solutions. The first is IE8+ compatible, utilizing pseudoelements. View it on JSFiddle here.
HTML:
<div class="box"></div>
CSS:
.box {
position: relative;
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid green;
}
.box:after {
content: "";
position: absolute;
top: -6px;
left: -6px;
display: block;
width: 108px;
height: 108px;
border: 2px solid red;
}
The second idea I have is a non-semantic solution, but gives you IE6+ support. View it on JSFiddle here.
HTML:
<div class="outer-box"><div class="inner-box"></div></div>
CSS:
.outer-box {
width: 104px;
height: 104px;
margin: 100px;
border: 2px solid red;
padding: 2px;
}
.inner-box {
width: 100px;
height: 100px;
border: 2px solid green;
}
Oh woops, I just saw that you requested leaving just a single div. Well, that first solution fits those requirements!
Some more solutions. I've used them successfully:
1.
.box {
outline:2px solid green;
border:2px solid transparent;
box-shadow: 0 0 0 2px red inset;
}
Restriction of this solution: "outline" property ignores "border-radius" one.
2.
.box {
border: 2px solid green;
box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px red inset;
}
Restriction of this solution: space between red and green borders can't be transparent because red box-shadow will be visible through it. So, any solid color needed, I've set #fff.
My issues with other solutions toward this end:
"outline-offset" is not compatible with IE; pseudoelements method requires absolute positioning and pixel ratios (no good for my responsive design); inset box-shadow does not display over an image.
Here is the fix I used to responsively frame images in an IE compatible way:
.container img {
border:2px solid white;
outline:4px solid red;
background-color: green;
padding: 2px;
}
"outline" defines the outer border, "border" defines the space in between, while the inner border is actually the background color with padding determining its width.
In cases where you're styling the ::focus pseudo-class, you won't have the luxury of using ::after or ::before pseudo-class as those methods are only effective on container elements (see W3C spec. for more information).
A cross-browser solution to give-off that offsetting effect is to use box-sizing, border, and padding.
You simply negate and alternate the padding and border width values.
Default / base styles:
input[type="text"] {
...
padding:10px;
border:1px solid grey;
}
Pseudo-class styles:
input[type="text"]:focus {
padding:8px;
border:3px solid red;
}
I have a div with different colors for both the border-bottom and border-right properties.
So they are separated via a line leaving the box in a 45 degree angle.
How can I make the bottom-border shorter so that the right border goes all the way to the bottom of the element which would yield a 90 degree angle separator-line?
You can do this with box-shadow.
Demo:
Output:
CSS:
#borders {
border-bottom: 20px solid black;
box-shadow: 20px 0 0 0 red;
height: 150px;
margin: 30px;
width: 150px;
}
HTML:
<div id="borders"></div>
I solved this issue using border-width. You simply reduce the width of the border at the edges you don't want to see.
If we don't want the border on the upper edge, we can put border-width to 0.
border-width: 0px 5px 5px 5px;
border-color:#ddd #000 #000 #000;
Sad fact: Border corners are mitered. Always. (It's only visible if using different colors.)
In order to simulate a butt joint, you can stack two divs to get a simulated result:
div {
position: absolute;
left: 0;
top: 0;
height: 100px;
width: 100px;
}
<div style="border-left: 2px solid #ff0000; border-bottom: 2px solid #ff0000;">
</div>
<div style="border-right: 2px solid #00ff00; border-top: 2px solid #00ff00;">
</div>
Stack more or control the top and bottom differently for better control over the appearance of the joint.
For the top border and the bottom border, you can use box-shadow:
.box {
border: 10px solid #ddd;
border-top: 0;
border-bottom: 0;
box-shadow: 0 10px 0 #D03FBE, 0px -10px 0 #D03FBE;
float: left;
width: 100px;
height: 100px;
}
<div class="box"></div>
What you are seeing is that borders on different sides will split diagonally around the corner:
.border {
border: 10px solid;
border-top-color: forestgreen;
border-right-color: gold;
border-bottom-color: steelblue;
border-left-color: firebrick;
width: 40px;
height: 40px;
}
<div class="border"></div>
This is a behavior many use to create CSS triangles
To overcome this I can find 2 solutions: borders on a wrapper element, or linear gradients:
Option 1: Wrapper elements
.wrapper {
border-bottom: 10px solid steelblue;
height: 40px;
width: 50px;
}
.border {
border-right:10px solid gold;
height: 40px;
width: 40px;
}
<div class="wrapper">
<div class="border"></div>
</div>
Note how the wrapper element has height of 5px more then the child. This is essential for the borders to align.
Option 2: Linear Gradients
.border {
border-bottom: 10px solid;
border-right: 10px solid;
border-image: linear-gradient(to top, steelblue, steelblue 10px, gold 5px, gold) 10;
height: 40px;
width: 40px;
}
<div class="border"></div>
If you're looking for square ends on your borders, you can set two of the borders to 0px and then run a dummy animation like so :
#keyframes widthSet {
to{
border-right-width: 10px; //or top and bottom, your choice
border-left-width: 10px;
}
}
with animation-fill-mode: forwards;
You can't.
For 90˚ angles you could just use colored divs.
You could get a similar effect for arbitrary angles by using skew transitions and absolute positioning, but it will be hard (if not impossible) to get it to look the same in older browsers (IE8 and lower will particular be a problem).