Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
What should I do if I add border to image but I want edge of this border. Like this:
Green: Image
Dark blue: First border
Light blue: Second border
Using CSS box-shadow to achieve multiple borders. The , separated list values are used to separate multiple borders/shadows. 15px and 30px are values denoted for spread-radius of each border/shadow.
.image {
background: url('http://placehold.it/300x300');
width: 300px;
height: 300px;
margin: 50px;
box-shadow: 0 0 0 15px #3F48CC, 0 0 0 30px #00A2E8;
}
<div class="image"></div>
Outline
body {
text-align: center;
}
img {
display: inline-block;
margin: 15px;
border: 3px solid red;
}
.outline {
outline: 3px solid green;
}
<img class="outline" src="http://lorempixel.com/output/nightlife-q-c-100-100-7.jpg" alt="">
Bonus: You can offset the outline.
Note: Outline does not respond to border-radius.
body {
text-align: center;
background: lightblue;
}
img {
display: inline-block;
margin: 15px;
border: 3px solid red;
}
.outline {
outline: 3px solid green;
outline-offset: 3px;
}
.offset {
outline-offset: 3px;
}
<img class="outline offset" src="http://lorempixel.com/output/nightlife-q-c-100-100-7.jpg" alt="">
Box-shadow
body {
text-align: center;
}
img {
display: inline-block;
margin: 15px;
border: 3px solid red;
}
.shadow {
box-shadow: 0 0 0 3px blue;
}
<img class="shadow" src="http://lorempixel.com/output/nightlife-q-c-100-100-7.jpg" alt="">
Note: box-shadow does respond to border-radius but it's 'value' is to scaled up from that of the border.
JSfiddle Example
<div style="border:3px solid gray">
<img src="data:image/jpeg;base64,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" style="border:2px solid blue">
</div>
you would most likely want to do that using CSS, unless you wanted to use Inline styling (which is generally frowned upon) take a look at this website: http://www.w3schools.com/css/css3_borders.asp
There are a lot of different properties like Borther-width:, border-color:, Border-radius: (if using a circle border). I believe there is one for making to separate borders.
http://www.w3schools.com/css/css_border.asp
for your specific case I'd say something like
CSS:
#green image {
border: 10px, solid purple;
outline: 3px, solid blue;
}
Just add a background-color and padding to the image and a text-align:center to the wrapper div like this:
.box{
width: 260px;
height: 260px;
text-align: center;
}
.box img {
border: #4830D0 5px solid;
padding: 5px;
background-color: green;
}
Here's a jsfiddle with above codes: http://jsfiddle.net/AndrewL32/65sf2f66/37/
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
This question already has an answer here:
Css - Need 'triple' border
(1 answer)
Closed 4 years ago.
Hello Guys I Would Like to Fill a Different Color in My css Double Border.I Know that it is Possible by Using Two Borders.
#parent{
width:100px;
height:100px;
border:1px solid #000;
display:flex;
align-items:center;
justify-content : center;
background-color:red;
}
#child{
width:80px;
height:80px;
border:1px solid #000;
background-color:#fff;
}
<div id="parent">
<div id="child"></div>
</div>
But here I would like to have a solution with a single Border Property(Single <div> or any other Element).So I Used css double Property.Is there is any Possible way to fill color on this double_border?
#element{
width:100px;
height:100px;
border:10px double #000;
}
<div id="element"></div>
Please Note :- Somebody Tagged That This is Possible Duplicate of
Another.Just Please Read Both of the Question before You Tagg. This
question is different,on that question he is asking for color the the
two borders with different color.but here I would like to keep two
borders with same color,I just wanna to fill some color between
them.hope you will understand the problem.
You could also use multiple box-shadows:
#element {
width: 100px;
height: 100px;
box-shadow: 0 0 0 3px #000, 0 0 0 6px #f00, 0 0 0 9px #000;
}
<div id="element"></div>
You can by using the border, box-shadow, and outline properties.
#element {
width: 100px;
height: 100px;
border: 3px solid black; /* inner border */
box-shadow: 0px 0px 0px 15px black; /* outer 'border' */
outline: 12px solid green; /* fill */
margin-left: 30px;
margin-top: 30px;
}
<div id="element"></div>
You can use a pseudo-element to accomplish this:
https://jsfiddle.net/82zn96Lu/
#doubleBorder {
text-align: center;
position: relative;
z-index: 10;
padding: 100px;
background: #fff;
border: 6px solid red;
}
#doubleBorder:before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border: 6px solid blue;
}
<div id="doubleBorder">
a double border
</div>
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.
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)
hey there i wonder if any of you have come across a similar issue? i am working on an ad section of the webpage and its got a really cool background that i would like to carry on into sections of the elements so i have a box that hold a box for a rss feed into updates made on the website and then i have a box for adverts. here is my html:
<div class="side">
<div id="ad">
bla
</div>
<div id="rss_news">
double bla
</div>
</div>
and the css:
.side {
float: left;
background-color: black;
width: 300px;
min-height: 710px;
padding: 0 0 0 0px;
margin-top: 25px;
border: 1px solid white;
border-radius: 8px 8px 8px 8px;
opacity: 0.3;
}
#ad {
border: 1px solid blue;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
#rss_news {
border: 1px solid yellow;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
as you can see and as i was anticipating the side class immits his attributes on the ones nested within him. is there a way that i could somehow tell the other id tags to ignore that opacity?
thanks in advance :D
There is no way to make descendants ignore the parent's opacity.
You can use rgba/hsla colors to get a partially transparent background, without affecting the children's visibility. Example:
.side {
background-color: rgba(0,0,0, 0.3);
}
Demo: http://jsfiddle.net/ywQy5/
See also:
MDN: hsla colors
MDN: rgba colors
You can use css3 rgba property for this & for IE you can use IE filter.Write like this:
.side{
background-color: rgba(0,0,0, 0.5);
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE*/
zoom: 1;
}