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
Related
I have a problem in IE and Edge when I use border-style: dashed; and border-radius: .375rem; on the same element:
div {
padding: 5rem;
margin: 1rem;
border: 1px dashed gray;
border-radius: .375rem;
}
The following is what I get (those weird things in the corners).
For the reason unknown to me I cannot reproduce this in jsfiddle or anywhere outside my document. Would be greatful for any advice on what this can be at all cause I am out of ideas (I am talking about those weird things in the corners).
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 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>
I'm attempting to style my navigation menu design to reflect the one on timeanddate.com, as seen in this image:
To create the colors, they're using a simple bottom and left border in CSS.
I'm attempting to add a border to my <li> tags on my website sandbox, http://www.escapetech.com:8080.
I'm using the following CSS:
.anylinkcss li {
list-style-type: none;
}
.participate li {
list-style-type: square;
border-left-color: #fa514d;
}
#navigation_bar {
height: 31px;
list-style: none;
width: 1000px;
margin-top: 15px;
}
#navigation_bar li {
float: left;
padding-right: 35px;
padding-left: 10px;
margin: auto 0px;
vertical-align: middle;
}
#anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 {
position: absolute;
line-height: 18px;
z-index: 20;
background-color: #000;
text-align:left;
visibility: hidden;
left: 421px;
top:207px;
padding: 7px;
padding-left: 25px;
}
The #anylinkcss3 and further represent styles for the drop downs, while the #navigation_bar styles are for the whole bar. No matter where I add any border styles, none appear, even after I comment out all CSS code and just include a border on these IDs and classes.
My current menu is live at the link I posted above, I would greatly appreciate if someone could take a look and let me know why there may be any issues with borders appearing. This is my first Stack Exchange post so I hope that this was correctly formatted!
Although you set the width and color, you can not leave out the style parameter with borders.
To get the desired effect as you presented in the image - jsFiddle demo
dark background color for the <ul>
a wide border-left on the <li>
a margin-bottom: 2px as bottom border - shows ul background
and a few small tweaks like text-indent etc
Some information regarding borders
CSS borders consist of 3 parameters
border-width
border-style
border-color
You can set one value, which applies to all sides
border-width: 5px;
border-style: solid;
border-color: red;
Or with short hand border: 5px solid red; and also applies to all sides.
You can style each border side individually, as you are doing above.
border-side-width
border-side-style
border-side-color
Example:
border-left-width: 5px;
border-left-style: solid;
border-left-color: white;
Which can be accomplished also with shorthand: border-left: 5px solid white;
For more information and other border opportunities
https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
ahhh... Brian you beat me to it.
I inserted border-style, and then there is "BORDER"
border: 5px solid white;
Actually the trick in his case is that border is applied to the anchor tags not the lists! Cheers! :) And yes if you apply border-color as a property you should also apply border-style and border-width :)
I'm trying to make an HTML/CSS menu in which the active link is indicated by a section of transparency (a pointer notched out of the border), to reveal the image behind the menu.
This is what I'm going for: http://larsakerson.com/northendgreenway/beta3.html
But with this sort of notched pointer: http://larsakerson.com/northendgreenway/beta2.html
Is there any way to do this in CSS (either 2.1 or 3), or is a strictly image-based menu the only way to make this work?
You can make a notched corner using borders like so...
div {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent blue blue blue;
background: transparent;
}
jsFiddle.
Refer to the jsFiddle and notice the top corner is letting the background through. Simply adapt this example to your site.
here you go dude. http://jsfiddle.net/jalbertbowdenii/vnNXW/
just change .trapezoid to .active:active{}
.trapezoid {
display:block;
margin:0;
padding:0;
width:1px;
height:1px;
background:transparent;
border-style: solid;
border-color:transparent #eee #eee #eee;
border-width: 50px 50px 50px 50px;
}
and change the border-sizes to fit.
for .active{border-color:transparent}