i want to add border to the bootstrap form box.i had added border style properties but its not working . suggest please
thia is the form box class:
<div class="form-box">
<div class="form-top">
<div class="form-top-left">
And this is the css :
.form-box {
margin-top: 0px;
border-radius: 25px;
border-bottom-style: solid;
border-color: #50e54b;
}
Because of other classes, use the "!important"
border: solid 2px #50e54b!important;
You can add border to your box by using the border CSS property [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
Here's an example usage:
border: 1px solid #FFFFFF;
The code above will add a solid border of 1px in thickness and white in colour.
Click the link above to see more about the border property.
From what I can tell, the code works fine. But if you want you can add an 8px padding so the content has room for placement instead of being crammed in there with the border. By the way, a 2px or 4px border radius looks better for the border, but it's up to you.
.form-box {
padding: 8px; /*makes it look neat*/
border-radius: 4px; /*or 2px*/
border: 1px solid red;
}
Related
I have a problem with the chrome browser. When I make custom "hr" tag with a "div" and top and bottom border, there is a white 1px line between the borders ...
IE and Firefox do well.
.nav_links_container_line {
border-top: 1px solid #096ebd;
border-bottom: 1px solid lightgrey;
}
<br><br><br><br>
<div class="nav_links_container_line"></div>
I try different thing (overflow, height 0px) but with no success.
My Chrome Browser is up to date (Version 62.0.3202.94)
Thank you
Simon
Actually that is not a white space, you used light-grey color to bottom and both border top and bottom attached and it's illusion like there is white space. If you want shadow for bottom of your custom hr then you can use following css for it -
.nav_links_container_line {
border-top: 1px solid #096ebd;
box-shadow: 0px 2px 10px #000;
}
What about using a real <hr/>? With that, I don't have the rendering issue you encountered, and it actually makes more sense to use hr in its own role.
.nav_links_container_line {
border-top: 1px solid #096ebd;
border-bottom: 1px solid lightgrey;
border-left: none;
border-right: none;
}
<br><br><br><br>
<div class="nav_links_container_line"></div>
<hr class="nav_links_container_line"/>
.myclass {
border: 6px dotted #2d2d2d;
width:200px;
height:200px;
border-radius:100% 100% 100% 100%;
}
When i'am trying to give full border radius to border: 6px dotted #2d2d2d; in browser it showing solid border not dotted above is my css code please help me.
This only happens in Firefox I think it's a bug - it's because of the radius - you might consider using an image in this case.
CSS border radius for dotted border
Instead of writing:
border: 6px dotted #2d2d2d;
try:
border-style: doted;
border-width: 6px;
border-color: #2d2d2d;
Thats what I use when I write CSS.
I'm trying to create a custom styled text field for a client.
They want a trapezium shaped input field.
This is what I've done till now:
HTML
<input type="text">
CSS
input{
background: #ccc;
color: #000;
border-bottom: 50px solid #ccc;
padding-top:5px;
border-left: 20px solid #fff;
border-right: 20px solid #fff;
height: 0px;
width: 200px;
}
Fiddle
Any idea on how or if it's possible to make something like this: .
Something like this:
<span class="outer">
<span class="inner">
<input type="text" value="test value" />
</span>
</span>
.outer {
display: inline-block;
border-bottom: 34px solid #000;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
.inner {
display: inline-block;
margin: 1px -18px -40px -18px;
border-bottom: 32px solid white;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
input
{
background: transparent;
border: none;
display: inline-block;
font-size: 130%;
}
http://jsfiddle.net/fNCt4/4/
The input itself doesn't contribute to the shape. It's only those two spans. You could use the input element itself for the inner shape, but since you need to add markup anyway, I think you might as well add two 'generic' trapezoid helper shapes and leave the input element untouched.
You'll need two to fake the border. This is needed, because the shape itself is created by adding a border, so the visible border is constructed by overlaying a slightly smaller shape onto the other.
The rest is tricks with negative margins to allow the inner shape to be positioned over the border of the outer shape. And of course using transparent as a color, to prevent the 'negative space' of the inner shape to overwrite the outer shape.
Once again clients being complicated!
I suggest you use a background image In the CSS of a trapezium with the outside transparent so a png. Make the margins in a bit so the user doesn't write outside the trapezium.
Hope this helps
You have two options here
CSS3
Image as a background.
for css3 option check out this link http://css-tricks.com/examples/ShapesOfCSS/
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0; width: 100px;
}
But to make it backward compatible i would suggest you go for image as a background as a fallback for css3.
i have div called "commentbox"
and i want to have border solid color #ccc, but i want the right side, not to bordered.
so only left, top and buttom of the div should be covered with borederlines. thanks
probably
.commentbox{
border: solid #ccc;
border-right: none;
}
This would work:
.commentbox {
border: 2px solid #ccc;
border-right: none; /* though some amend this to: '0 none transparent' */
}
Effectively you declare the width, style and color of the border in the shorthand first rule, and then assign a style of none (although you could use border-right-width: 0 or border-right-color: transparent to achieve the same result in compliant browsers).
You can do this:
.commentbox{
border:1px solid color #ccc;
border-right:none;
}
The rule border:1px solid color #ccc; will apply border to all four sides but later rule border-right:none; will remove it from right side leaving you with three sides of the border.
You can read this post on CSS-Trick.Com:
Three-Sided Border
UPDATE: Fixed with margin-bottom: 0px;
But somehow it still affect the text box size. Larger.
Then if I use outline instead of border, the border-radius will not work.
I have a problem with the these elements when one of them is clicked/focused,
it's affect the other element's position. It's because the border is larger than the normal size. So how to fix it?
For example: Click on the text area, it'll make the text input move away.
Note: I don't want to use box-shadow. No need to use position property actually.
HTML
<h3>Text Area</h3>
<textarea></textarea>
<br />
<h3>Input: Text</h3>
<input type="text" />
CSS
input{
background: #fff;
border: 1px solid #B7B7B7;
font-size: 15px;
margin: 2px 0;
padding: 5px 5px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
input:focus, textarea:focus {
border: 3px solid #507ad5;
margin-bottom: 0px;
}
textarea {
width: 300px;
height: 100px;
}
UPDATE: See and test it directly: http://jsfiddle.net/hedaru/dSgxr/6/
Here it is how it supposed to be: goo.gl/jAojK
Your CSS specifies the focused elements to be larger than the non-focused versions of the same elements.
Adding a border physically grows an element. Either add the same number of pixels of border to your element's base (with white colour) or use outline.
Here's my fix: http://jsfiddle.net/g105b/dSgxr/2/
It happens because of this:
input:focus, textarea:focus {
border: 2px solid #507ad5;
}
If you add another pixel to the border, the element is going to move.
You should keep the border at 1px and change its color.
input:focus, textarea:focus {
border: 1px solid #507ad5;
}
Update:
Use margins instead of position, it will fix it in the same place and the borders will "grow" around it. Here's an example.
CSS:
input:focus, textarea:focus {
border: 2px solid #507ad5;
margin-top: 0px;
margin-left: -1px;
}
Another option (besides merely changing the border colour) is to add a margin that shrinks by the same amount that the border grows. Note that the margin must be large enough to overcome the margin collapse with adjacent elements.
Perhaps you can change the difference in margin. It seems like the margin-bottom of the elements right now is 2px, so when you change it to 0px on focus, you compensate for the growth of the element. Like so:
input:focus, textarea:focus {
border: 2px solid #507ad5;
margin-bottom: 0px;
}
Or just add "margin: 0px" on the focused one. Just make sure margin+border makes the same number on focused and unfocused.