I have a div, padding set to 50px both left and right.
Is it possible to add the purple border?
I cannot add code to the HTML, this should be done with pure css if possible. I tried to trick this with border-image and adding gradients but I could only add like this:
div {
width: 150px;
height: 150px;
background-color: grey;
padding-left: 50px;
padding-right: 50px;
border-top: 5px solid black;
border-image: linear-gradient(to right, white 50px, purple 0%);
border-image-slice: 1;
}
<div>Content</div>
https://jsfiddle.net/u7zq0amc/1/
Use a pseudo element instead:
div {
width: 150px;
height: 150px;
background-color: grey;
padding-left: 50px;
padding-right: 50px;
position:relative;
margin-top:20px;
}
div:before {
content:"";
position:absolute;
height:5px;
top:-5px;
right:50px;
left:50px;
background:red;
}
<div>Content</div>
Related
Every guide I find has the line and fill the same colour. All I want is a circle with a red line and white fill.
I have tried:
.circle {
border: red;
background-color: #FFFFFF;
height: 100px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
width: 100px;
}
But cannot get the red border?
You forgot to set the width of the border! Change border: red; to border:1px solid red;
Here the full code to get the circle:
.circle {
background-color:#fff;
border:1px solid red;
height:100px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
width:100px;
}
<div class="circle"></div>
You are missing the border width and the border style properties in the Border shorthand property :
.circle {
border: 2px solid red;
background-color: #FFFFFF;
height: 100px;
border-radius:50%;
width: 100px;
}
<div class="circle"></div>
Also, You can use percentages for the border-radius property so that the value isn't dependent of the circle width/height. That is why I used 50% for border-radius (more info on border-radius in pixels and percent).
Side note : In your example, you didn't specify the border-radius property without vendor prefixes, you propably don't need them as only browsers before chrome 4 safari 4 and Firefox 3.6 use them (see canIuse).
Try this:
.circle {
height: 20px;
width: 20px;
padding: 5px;
text-align: center;
border-radius: 50%;
display: inline-block;
color:#fff;
font-size:1.1em;
font-weight:600;
background-color: rgba(0,0,0,0.1);
border: 1px solid rgba(0,0,0,0.2);
}
http://jsbin.com/qamuyajipo/3/edit?html,output
.circle {
border: 1px solid red;
background-color: #FFFFFF;
height: 100px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
width: 100px;
}
Here is a jsfiddle so you can see an example of this working.
HTML code:
<div class="circle"></div>
CSS code:
.circle {
/*This creates a 1px solid red border around your element(div) */
border:1px solid red;
background-color: #FFFFFF;
height: 100px;
/* border-radius 50% will make it fully rounded. */
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius: 50%;
width: 100px;
}
<div class='circle'></div>
.box{
opacity: 0.8;
position: absolute;
top: 28px;
left: 45px;
width: 280px;
background: green
}
.box:before{
content: '';
border: 5px solid pink;
margin: 10px;
width: 300px;
}
Tried to make the box with border in the blank gap between box and border. I tried both border in box or :before but the borders are not showing outside the box along with white space.
Appreciate help.
The cleanest way to do it is to use the following CSS:
#box{
position:relative;
z-index:10;
padding:0px;
background:#fff;
border:12px solid #390;
width: 100px;
height: 100px;
}
#box:before {
content:"";
display:block;
position:absolute;
z-index:-1; top:2px;
left:2px;
right:2px;
bottom:2px;
background-color: pink
}
See the DEMO here: http://jsfiddle.net/fvHJq/1/
Depending on your needs, a simple outline might help:
.box {
width: 300px;
height: 300px;
background: #1baaaa;
border: 10px solid #fff;
outline: 5px solid #ff7474;
}
Fiddle
I have some divs that have rounded corners and colored borders. I want the borders of the div to have the gradient so that it will change when the user hovers overs the div.
I have found all of the sites on how to use the gradient (http://css-tricks.com/css3-gradients/, http://gradients.glrzad.com/, etc.) but I still can't figure out how to get this to work for rounded edge borders.
Will someone please guide me to a site that describes how to do this or even help me with the code?
Here is the SIMPLE solution for that :
Outcome : CSS rounded corners with gradient border
.yourClass {
display: inline-flex;
border: double 6px transparent;
border-radius: 80px;
background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00, #3020ff);
background-origin: border-box;
background-clip: content-box, border-box;
}
You can nest two elements and let the outer div act as the gradient border then you can work around this problem, example:
<div class="container">
<div class="content">
...
</div>
</div>
And then in your CSS:
/*
unprefixed for conciseness, use a gradient generator por production code
*/
.container {
background: linear-gradient(red, black);
}
.content {
background: white;
padding: 10px;
}
For a working example take a look at https://stackoverflow.com/a/7066176/524555
Using a :before element is the most ideal solution in my opinion, as you then have full control via CSS and the HTML markup stays clean.
.circle {
width: 300px;
height: 200px;
background: white;
border-radius: 100%;
position: relative;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.circle::before {
border-radius: 100%;
width: 100%;
height:100%;
content: '';
background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
padding: 10px;
top: -10px;
left: -10px;
position:absolute;
z-index:-1;
}
You can tweak the padding and the top and left values to adjust the border thickness.
Here is a JSFiddle that shows a practival example: http://jsfiddle.net/wschwarz/e2ckdp2v/
I know this answer was already answered and accepted, but I wanted to post a different approach I used, because this accepted answer wouldn't work if the button was over a background with another gradient, or an image, for example.
My solution works only for horizontal gradients and rounded-cornered (but not circle) buttons. I used both the "border-image" property and pseudo-elements to achieve this effect:
The button would have only the top and bottom "border-image" borders. The left and right borders would be completed with pseudo-elements.
Here's a working example:
HTML:
<div class="background">
<button class="button">
My button!
</button>
</div>
CSS:
*, *:before, *:after {
box-sizing: border-box;
}
.background {
background: linear-gradient(to bottom, #002e4b 0%,#1c4722 100%);
width:500px;
height:500px;
display:flex;
align-items:center;
justify-content:center;
}
.button {
box-sizing:border-box;
display: inline-block;
padding:0.5em 0;
background:none;
border:none;
border-top:2px solid #0498f8;
border-bottom:2px solid #0498f8;
border-image: linear-gradient(to right, #0498f8 0%, #4db848 100%);
border-image-slice: 1;
position: relative;
text-transform: lowercase;
transition:background 0.3s;
color: #fff;
cursor: pointer;
font-size:1em;
&:before,
&:after {
content: '';
display: block;
width: 2em;
height: calc(100% + 4px);
border-radius: 3em 0 0 3em;
border: 2px solid #0498f8;
position: absolute;
border-right: none;
transition:background 0.3s;
left: -2em;
top: -2px;
}
&:after {
border-radius: 0 3em 3em 0;
border: 2px solid #4db848;
position: absolute;
border-left: none;
left:auto;
right: -2em;
top: -2px;
}
&:hover {
background:rgba(0,0,0,0.3);
&:after,
&:before {
background:rgba(0,0,0,0.3);
}
}
}
https://jsfiddle.net/fnbq92sc/2/
border="solid 1px transparent"
background="linear-gradient(Canvas, Canvas) padding-box, linear-gradient(red, blue) border-box"
borderRadius="1rem"
second part for background is the gradient you desire ^
My scenario here:
Inside the div which is mentioned below I need to add Find Out More link in right bottom of the div which should contain different bg-color in other words a box structure with an arrow image at the last.
.answerbox
{
height: 150px; /*Specify Height*/
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
}
How It should look :
Do you mean like this? Here's a jsfiddle
By setting the parent (.answerbox) to position: relative, I'm able to set .more to position:absolute and position it wherever I like in that box; In this case, bottom right of the container.
HTML
<div class="answerbox">
Find out more
</div>
CSS
.answerbox {
height: 150px; /*Specify Height*/
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
position: relative;
}
.more {
background: red;
position: absolute;
bottom: 0;
right: 0;
padding: 0 10px;
height: 30px;
}
Edit - In case you want an arrow image on the button
Updated Fiddle
CSS
.more {
background: url('http://dc390.4shared.com/img/AgV87Tvx/s7/arrow_small_right.png') no-repeat left center red;
position: absolute;
bottom: 0;
right: 0;
height: 30px;
padding: 0 10px 0 20px; /* Extra padding left to make room for the button */
line-height: 30px; /* Used to center the text vertically. Use the same value as the height.*/
}
Edit - Let the box grow with the content
Updated Fiddle
CSS
.answerbox {
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
position: relative;
padding: 10px 10px 40px;
}
did you mean something like this:
<div class="answerbox">
<a href='#' class="findout">
find out more..
</a>
</div>
and
.findout
{
position:relative;
top:120px;
left:20px;
background-color:white;
color:Red;
}
see fiddle
Please take a look at my fiddle. I am trying to have a input field next to a 32x32 icon. For some reason there is white space that hangs off the bottom of my div. Both the div and image should be 32x32px I'm doubtful it's my browser but I can't figure it out:
http://jsfiddle.net/WbhgA/1/
Here's what I'm seeing
http://i.imgur.com/3C1eN.jpg
Try this - http://jsfiddle.net/WbhgA/15/
.inputHolder {
height: 32px;
margin-right: 60px;
}
.inputHolder input {
border: 1px solid;
border-radius: 6px;
width:100%;
height: 32px;
line-height: 32px;
}
.icon {
border: 1px solid red;
border-radius: 6px;
width: 32px;
height: 32px;
float: right;
margin-top: -32px;
background: transparent url(http://icons-search.com/img/fasticon/icomic_lnx.zip/icomic_lnx-icons-32X32-web.png-32x32.png);
}
You have padding-right of 20px on the input div
so
.inputHolder {
display:table-cell;
width:100%;
height:32px;
}
Fiddle here http://jsfiddle.net/WbhgA/13/
Update: oh that space
you just need to align it vertically
.inputHolder {
display:table-cell;
width:100%;
height:32px;
border:1px solid red;
vertical-align: middle;
}