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.
Related
Today I was trying to create a card in HTML/CSS with hidden border which appears after hovering on a card. I came up with this code, which works fine for me:
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: 5px solid rgba(0,0,0,0);
background-color: red;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
I just want to know if there isn't any better way of doing this. This works fine since I don't need to animate it, but is this a proper way of hiding border or not? Thanks for Your answers.
EDIT: I think I should edit my question since I don't want to use box-sizing: border-box property. I'd like to hide my border with "content-box". And here border: none won't work.
Your solution is the right way to handle this problem.
Others have commented that to hide the border you should use border: 0px or border: none but with that method you have the problem that when the box is hovered, the width of the element changes making it, not only ugly to look at, but hard to predict what the width will be, and how it can affect adjacent elements.
I would use exactly the same method you have used.
You can also adjust the background-clip to avoid the border to overlap the background:
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: 5px solid rgba(0,0,0,0);
background-color: red;
background-clip:padding-box;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
To hide border use border:none instead border: 5px solid rgba(0,0,0,0);
When you use border: 5px solid rgba(0,0,0,0); means you apply border but with transparent color.
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: none;
background-color: red;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
.card{
border: 0px solid black;
}
.card:hover{
border: 5px solid black;
}
I think that is your solve
I am trying to implement a double border as shown below with CSS - ideally without using extra elements.
My initial thought would be to apply the first border to the container element, and the second to the title element below.
.box {
border-top: 1px solid black;
}
h2 {
float: left;
border-top: 2px solid red;
margin-top: 0;
padding-top: 10px;
padding-right: 5px;
}
<div class="box">
<h2>Title</h2>
<p>Some text here</p>
</div>
The main issue here is that the requirement may be that the width of the small border is indepedent of the width of the text. Also we may run into problems with line-height / vertical text alignment.
Are there are other viable solutions to this problem?
I hope the below CSS code will help you.
.box{
border-top: 2px solid gray;
}
h2{
width: 200px;
height: 300px;
border-top: 2px solid red;
position: absolute;
top: -12px;
}
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>
I'm trying to make a drop down menu, without any images, Pure CSS and HTML like the following:
What I'm not able to do is make this little Triangle shaped trim on Top
is it possible in CSS, if it is, how?
Live Example: http://jsbin.com/owafod/1/
I used CSS triangle generator to create the triangle.
#Nav {
width: 300px;
height: 200px;
background: #333;
}
#Triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #ffffff transparent transparent transparent;
margin: 0 auto;
}
Here's a solution with borders :
Result :
HTML :
<div id=a></div><div id=b></div>
<div id=c></div>
CSS :
#a {
border-right: 5px solid white;
border-bottom: 5px solid black;
width: 100px;
display: inline-block;
margin:0;
}
#b {
border-left: 5px solid white;
border-bottom: 5px solid black;
width: 100px;
display: inline-block;
margin:0;
}
#c {
background: black; height:20px;width:210px
}
Tests
And here's a picture that will probably suffice to explain how it's made and how you can easily use this kind of border trick :
(the code to make it)
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;
}