I have the following CSS code:-
border:5px solid grey !important;
which will apply the style setting to all the border four dimensions upper,lower,right & left. but how i can define the boarder to only applied to the upper,right & left . without having to define separate style for each ?
Thanks
You can try,
border:5px solid grey;
border-bottom:0px;
You can define to all dimensions border and then redefine border for bottom:
border:5px solid grey !important;
border-bottom:5px solid transparent !important;
Also you can set bottom border to none or 0 (these means that element will not have bottom border).
P.S. AS you use !important in defining border, you need to use it also in redefinision of border.
JSFiddle
No. This is not possible with this border:5px solid grey !important; shorthand methodology.
You need to declare them in the way as mentioned below to achieve what you are looking for.
WORKING DEMO
The HTML:
<div>ABCD</div>
The CSS:
div{border-width: 5px 5px 0px 5px; border-style: solid; border-color: grey;}
FURTHER REFERENCE
Hope this helps.
border-right:5px solid grey !important;
border-top:5px solid grey !important;
border-left:5px solid grey !important;
or another shorter way:
border:5px solid grey !important;
border-bottom: 0 !important;
or you can utilize box-shadow:
box-shadow:
inset 5px 0 0 red, /* LEFT */
inset 0 0px 0 blue, /* BOTTOM */
inset 0 5px 0 green, /* TOP */
inset -5px 0 0 yellow; /* RIGHT */
Fiddle is here
You can use border-bottom:
border:5px solid grey;
border-bottom:none;
Just specify the area you want border on that line of code itself like this.
border: solid grey!important;
border-width:5px 5px 0 5px!important;
Related
How can I make the border only appear on the top when I hover over it?
Code:
a:hover {
border-top: 3px white;
border-style: solid;
}
It makes the border still appear on all sides, but I want it to appear only on top.
You can also use:
a:hover {border-top: 3px solid white; border-right: 0; border-bottom: 0; border-left: 0;}
If the regular state of your link uses all four borders, then use 0 for the right, bottom, and left borders if you want only the top border on :hover.
a:hover {
border-top: 3px white;
border-style: solid;
border-bottom: 0px white;
border-right: 0px white;
border-left: 0px white;
}
Fixed it. Only appears on the top now. :)
Please try the below code.
border-style: solid;
border-top: thick double green;
border-left:0;
border-bottom:0;
border-right:0;
I think when you use solid it draws border on al sides. The above code will actually get rid of the border from all three sides but not the top.
I want to have round left border on an element which has border-radius: 10px 0 0 10px (top-left, bottom-left). But with normal border-left: 10px solid black, it doesn't look really round (like circle I mean). Here is the fiddle.
It seems browser first add solid border, then round whole element, including solid border.
But I need vice versa and a round solid border.
Can can use a box-shadow to get a more rounded border.
http://codepen.io/Spaceman/pen/ejDJK
#rounded {
background: lightblue;
border-radius: 10px 0 0 10px;
box-shadow: -5px 0px 1px 0px #000000;
height: 100px;
padding: 10px;
}
Does anyone know the CSS required to add an outer border around textboxes like this example from Twitter?
Thanks for the help
outline:
input{outline:solid 4px #ccc}
(another option it to wrap the input with div of course)
You can use the box-shadow property
http://jsfiddle.net/VXJdV/
input {
display: block;
margin: 2em;
box-shadow: 0 0 10px gray;
}
input[type="text"],input[type="password"]{
border: solid 1px #ccc;
padding: 4px;
border-radius:4px;
}
You'll want to cover the other border radius too, -moz- & -webkit-
Demo: http://jsfiddle.net/BqpZh/
.classname
{
box-shadow:0 0 2px red
}
use this class or you and add box-shadow property to your existing class. You can increase 2px to 5px or 10 for broder shadow
.front-card .text-input:focus {
border:1px solid #56b4ef;
-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6)
}
Using box shadow will help you like this:
class{
box-shadow: horizontal vertical blur-radius spread-radius color;
box-shadow:2px 0 3px 5px red;
}
horizontal (-value will move towards left) (+value on right)
vertical (-value will move upwards) (+value on downwords)
blur-radius: will blur the color you choose around box
spread-radius: will spread color to the chosen distance
You can use a wrapping div outside of the input box and give it that background color and rounded corners!
HTML:
<div class="outter"><input class="inputbox"></input></div>
CSS:
.outter {
margin: 20px;
padding: 10px;
border-radius: 15px;
background-color: red;
display: inline-block;
}
.inputbox {
border-radius: 5px;
}
Here you have a jsfiddle: http://jsfiddle.net/dsBgw/
You can consider using multiple shadows:
input[type="text"]{
box-shadow: 0 2px 2px rgba(0,0,0,0.2),
0 1px 5px rgba(0,0,0,0.2),
0 0 0 12px rgba(255,255,255,0.4);
}
i have a demo, it it like the login form for twitter. if you want to view, pls click here.
I would like to bold the border of a div.
My problem is that i need to bold only the top and bottom borders.
For example: if i have a div as a shape of a square it should look:
_______________
_______________
How can i do it in css?
In CSS
border-top:3px solid #000;
border-bottom:3px solid #000;
and then if you want borders on left and right just make them 1 px instead of 3
Set the width of the bottom and top borders higher.
#element {
border-top: 5px solid #000;
border-bottom: 5px solid #000;
}
Try:
border: 2px 0px 2px 0px #000;
Edit:
Quick explanation of border shorthand properties. The order of elements is width style color, where the width is in the order of Top Left Bottom Right. So in the above example it will set the top and bottom borders to 2px with the left and right being 0px. It will default the style of the border to solid and the color will be black. To create a dashed border on the left and right instead you would use:
border: 0px 2px 0px 2px dashed #000;
You can do it with:
border-top: 1px solid black;
border-bottom: 1px solid black;
Try something like:
border-top: 2px solid black;
border-bottom: 2px solid black;
For more info, see https://developer.mozilla.org/en-US/docs/CSS/border-top and https://developer.mozilla.org/en-US/docs/CSS/border-bottom.
Client wants two color borders for an embossed look. Can I do this on one element? I was hoping to avoid stacking two DOM elements with individual borders.
Yep: Use the outline property; it acts as a second border outside of your border. Beware, tho', it can interact in a wonky fashion with margins, paddings and drop-shadows. In some browsers you might have to use a browser-specific prefix as well; in order to make sure it picks up on it: -webkit-outline and the like (although WebKit in particular doesn't require this).
This can also be useful in the case where you want to jettison the outline for certain browsers (such as is the case if you want to combine the outline with a drop shadow; in WebKit the outline is inside of the shadow; in FireFox it is outside, so -moz-outline: 0 is useful to ensure that you don't get a gnarly line around your beautiful CSS drop shadow).
.someclass {
border: 1px solid blue;
outline: 1px solid darkblue;
}
Edit: Some people have remarked that outline doesn't jive well with IE < 8. While this is true; supporting IE < 8 really isn't something you should be doing.
This is very possible. It just takes a little CSS trickery!
div.border {
border: 1px solid #000;
position: relative;
}
div.border:before {
position: absolute;
display: block;
content: '';
border: 1px solid red;
height: 100%;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
<div class="border">Hi I have two border colors<br />I am also Fluid</div>
Is that what you are looking for?
Another way is to use box-shadow:
#mybox {
box-shadow:
0 0 0 1px #CCC,
0 0 0 2px #888,
0 0 0 3px #444,
0 0 0 4px #000;
-moz-box-shadow:
0 0 0 1px #CCC,
0 0 0 2px #888,
0 0 0 3px #444,
0 0 0 4px #000;
-webkit-shadow:
0 0 0 1px #CCC,
0 0 0 2px #888,
0 0 0 3px #444,
0 0 0 4px #000;
}
<div id="mybox">ABC</div>
See example here.
Have you tried the different border styles available within the CSS spec? There's already two border styles that might accommodate your need:
border-style: ridge;
Or
border-style: groove;
Outline is good, but only when you want the border all around.
Lets say if you want to make it only on bottom or top you can use
<style>
#border-top {
border-top: 1px solid #ccc;
box-shadow: inset 0 1px 0 #fff;
}
</style>
<p id="border-top">This is my content</p>
And for bottom:
<style>
#border-bottom {
border-top: 1px solid #ccc;
box-shadow: 0 1px 0 #fff;
}
</style>
<p id="border-bottom">This is my content</p>
Hope that this helps.
Instead of using unsupported and problematic outline just use
background-color + padding for the inner border
normal border for the outer one.
Example:
HTML:
<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />
CSS:
img {
padding: 1px;
background: yellow;
border:1px solid black;
}
TEST(JSFiddle):
img {
padding: 1px;
background: yellow;
border: 1px solid black;
}
<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />
If by "embossing" you mean two borders around each other with two different colours, there is the outline property (outline-left, outline-right....) but it is poorly supported in the IE family (namely, IE6 and 7 don't support it at all). If you need two borders, a second wrapper element would indeed be best.
If you mean using two colours in the same border. Use e.g.
border-right: 1px white solid;
border-left: 1px black solid;
border-top: 1px black solid;
border-bottom: 1px white solid;
there are special border-styles for this as well (ridge, outset and inset) but they tend to vary across browsers in my experience.
Adding the following CSS properties to a border will achieve a double border of two distinct colors and identical widths for those who are interested.
Example:
Selector {
border: 10px red;
border-block-start-style: ridge;
border-inline-start-style: ridge;
border-inline-end-style: groove;
border-block-end-style: groove;
}
Not possible, but you should check to see if border-style values like inset, outset or some other, accomplished the effect you want.. (i doubt it though..)
CSS3 has the border-image properties, but i do not know about support from browsers yet (more info at http://www.css3.info/preview/border-image/)..
Simply write
style="border:medium double;"
for the html tag
You could use
<html>
<head>
<title>Two Colors</title>
<style type="text/css">
.two-colors {
background: none repeat scroll 0% 0% rgb(245, 245, 245); border-color: rgba(111,111,111,0.2) transparent;
padding: 4px; outline: 1px solid green;
}
</style>
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
background-color:yellow;
}
</style>
</head>
<body>
<a target="_blank" href="people.htm">
<img class="two-colors" src="people.jpg" alt="Klematis" width="213" height="120" />
</a>
</body>
</html>
This produces a nice effect.
<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
internal stuff
</div>
</div>