I'm trying to add a border to a div element in HTML. Below is my code.
#container-border {
border-width: 2px;
border-color: red;
}
<div id="container-border">
...
</div>
For some reason, the border doesn't show up. I had a look on a similar question (here) but I couldn't figure out why the border doesn't show up. Any suggestions please?
Note: This snippet is a part of an HTML page. Additional code could be provided upon request
The default value of border-style is none. You need to set a different value for a border to appear.
#container-border {
border-width: 2px;
border-color: red;
border-style: dashed;
}
<div id="container-border">
...
</div>
You can use the shortcode for border, which contains color, width AND style (which you are missing right now, and whose default setting is "none"):
#container-border {
border: 2px solid red;
}
You have to set the rule "border-style" to see the border
#container-border {
border-width: 2px;
border-color: red;
border-style:solid;
}
<div id="container-border">
...
</div>
Related
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;
}
I'm trying to apply a CSS style to multiple div elements as in the following HTML code:
{% for i in player_range %}
<div id="container-frame-{{ i }}"
...
</div>
{% endfor %}
Where the value of i is variable and being passed to the HTML from the Python side of my software.
Below is the CSS style I'd like to apply for each element.
#container-frame-0{
border-style: solid;
border-width: 5px;
border-color: green;
}
I tried to hardcode the different values of i (e.g, 0,1,2 etc...) to the container-frame style and it works fine. However, I'm searching for a cleaner way to do it.
Ideally I'm looking for something like this:
#container-frame-{{i}}{
border-style: solid;
border-width: 5px;
border-color: green;
}
Where i is the same as in the HTML.
Any idea how to do so?
Give the div a class. Use a class selector.
<div id="container-frame-{{ i }}" class="container-frame"
.container-frame {
border-style: solid;
border-width: 5px;
border-color: green;
}
You could also use an attribute selector.
[id^="container-frame-"] {
border-style: solid;
border-width: 5px;
border-color: green;
}
Use #Quentin approach or use this selector in your CSS:
div[id^="container-frame-"]{ ... }
use class for mulitple elements, because id its just for on element
<div class="myClass"></div>
<div class="myClass"></div>
And in CSS:
.myClass{
border-style: solid;
border-width: 5px;
border-color: green;
}
So, your current code is not working because id's should only apply to one element. Try giving each div a class, and then style them like this:
/* Notice use of dot instead of hash */
.whatever-name-you-want {
border-style: solid;
border-width: 5px;
border-color: green;
}
You can read up on this here: https://www.w3schools.com/css/css_syntax.asp
As mentioned by others, you could use a class but alternatively you can use an attribute selector.
div[id^="container-frame-"], div[id*=" container-frame-"] {
border-style: solid;
border-width: 5px;
border-color: green;
}
Please see this question for more detail: wildcard * in CSS for classes
I'm trying to create just a solid white 10px border at the top of this main content (.tab-pane) element but no matter what I try, I keep getting this boxed outline and a white border at top with grey in the middle and white on the sides. Maybe I'm trying to do it on the wrong element (but i want it right below the nav in between the nav and the main content).
here's some of my css:
.tab-pane {
border-top: 10px;
border-color: #ffffff;
border-style: solid;
border-width: 100%;
}
Try this short version
border-top: 10px solid #FFF;
Otherwise, the full code should be:
border-top-color: #FFF;
border-top-style: solid;
border-top-width: 10px;
Looking at your markup the area that you want to target is the id = home so if you add a background color of white to that id in your css that gray bar will go away. so at the bottom of your stylesheet/css just add the following code.
CSS
#home {
background-color: white;
}
I have a div that wraps around my <footer> tag. In the div is an <hr>, which needs to be in the div to have the positioning properties applied. However, it also carries over the coloring of the links in my footer. I don't want the <hr> to be the same color as the links. Is there any way to "escape" this or change the property.
I tried <hr style="color: black;"> but that didn't change anything. If you have any input on how to change the properties despite the set CSS in the div, I would greatly appreciate it.
JS Fiddle: http://jsfiddle.net/o6vmz7t5/1/
HTML
<div id="footer_style">
<hr>
<footer>
Contact
Privacy Policy
Create Account
</footer>
</div>
CSS
#footer_style {
margin: 0 auto;
position: fixed;
bottom:0;
width: 100%;
padding: 20px;
}
#footer_style a {
color: #f2f0e1;
}
#footer_style a:hover {
color: black;
}
hr tags simply have a border-top applied on them
override the hr as below
#footer_style hr {
border-top: 1px solid black;
}
#footer_style hr {
background-color: black;
height:1px;
}
JSFiddle
Whoa, it had me struggling for a minute. Apparently since the hr has no height and you cant see its internal "fill", affecting the color does nothing.
What you actually see is the border, so using border-color did it for me.
Please try below code I have try this code. Using this code solve your problem.
border-color: red;
Instead Using the color: black;
Try using in this way
border: 1px solid #000;
border-width: 1px 0px 0px 0px;
Try it
I want to know the difference between border styles- ridge and groove. When i used them, i was not able to spot the difference between the two. I cannot upload the image since i have not reached level 10 to make it more clear. Here's the code:
border-style: groove ridge dashed groove;
It's border shadow position:
Ridge: from top left
Groove: from bottom right
div {
padding: 10px;
margin: 10px;
float: left;
background-color: white;
}
.wrap {
background-color: #ffdddd;
}
#ridge {
border-width: 5px;
border-style: ridge;
margin-right: 1px;
}
#groove {
border-width: 5px;
border-style: groove;
margin-left: 1px;
}
<div class="wrap">
<div id="ridge">ridge</div>
<div id="groove">groove</div>
</div>
The difference is defined in somewhat vague terms in the CSS 2.1 specification:
groove
The border looks as though it were carved into the canvas.
ridge
The opposite of 'groove': the border looks as though it were coming out of the canvas.
This allows various interpretations and implementations, and the visual effect is often not that clear. It tends to be clearer when the border is relatively wide. Typically browsers use two different colors to create the impression, the declared border color and a lighter color. This is meant to correspond to an idea of groove or ridge border when light is coming from the direction of the upper left corner. Example:
<style>
span { border: solid red 10px }
.groove { border-style: groove }
.ridge { border-style: ridge }
</style>
<span class=groove>groove</span>
<span class=ridge>ridge</span>
Here are some MDN docs on css border-style
According to this:
groove: Displays a border leading to a carved effect. It is the opposite of ridge.
Groove is a 3D effect that gives the impression that the border is carved into the canvas.
Ridge is a 3D effect that has the opposite effect of groove, in that the border appears to protrude from the canvas.
This link gives you a clear idea:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style