What's the default border width in HTML/CSS? On various online sources, I read the default border width is medium = 3px on each side.
However, when testing it out myself (on Chrome), the default width is 1.5px on each side and not 3px (if I do not specify a width and just specify border-color and border-style).
Why is that? What is correct here?
I set
border-style: solid;
border-color: black;
and expected it to be 3px width on each side like online sources say, but it's 1.5px instead.
Here's a screenshot:
The border width default is NOT medium by default in my browser for some reason. If I would set it to medium, it's 3px. But like that (so, by default), it's 1.5px.
<p style="border-style: solid;border-color: black;">C:</p>
<p style="border-style: solid;border-color: black;border-width: medium;">C:</p>
I tested with this code:
<html>
<body>
<div style="width:100px;height:100px;border-color:black;background:gray;border-style:solid">
</div>
</body>
</html>
So fore me all standard edge widths are the same: 3px.
Also when I set the width to medium: still all 3px.
Which browser are you using?
Check if you haven't set a border of some parent
Related
I'd like to set a global default size and color for all my borders using css. I'm having an issue where my css for setting a default border width and color is being overwritten the moment I try and use it. Basically I have something like this:
My.css
* {
border-width: 1px;
border-color: #222;
}
#streak {
border-bottom: solid;
}
My.html
<html>
<div id="streak">
WOOOOOOOO!
</div>
</html>
The problem is that the moment I set the bottom border to solid, it defaults the width to 3px and the color to black. In the developer console it shows that the css for * {...} was applied, but then it was crossed out and now it is currently at a width and color of initial, which it got from the "border-bottom: solid;" rule.
I've found that if I use !important in the * {...} css rules, it'll work, but I'm really not a fan of using !important if I don't have to.
Is there a better way?
What you're doing with the * rule is fine. What you're trying to do on individual elements is set the border style. You will need to use the border-style component property for that, rather than the border shorthand as the shorthand will override the width and color with their initial values (which are medium and currentColor respectively):
#streak {
border-bottom-style: solid;
}
Of course, this means you can continue using the shorthand in situations where you do want to override the global width and color with other values.
your css file and class everything correct.you missed the line "border:solid" this for border style.without giving type it won't work.now you can try with this.
* {
border-width: 1px;
border-color: #222;
border:solid
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<div>
WOOOOOOOO!
</div>
<span> hiiiiiiiiiiiiiiiii </span>
</html>
I want to create a thin border. Simple. My code will not render it. In order to give it the maximum specificity I placed temporarily in a page element:
<div style="max-width: 100%; position: relative;border-radius: 4px; border-color: #ddd; border:thin; background-color: #ffffff ;">
Regardless of anything I do,the border will not render. Everything else renders. If I put the background colour to red, it renders fine. Not the border.
So, looking into Chrome developer tools I see that the border width is described as 0px, which makes no sense. However if I expand that I see my value of 1px.
There are no other inherited values in the CSS which would appear to override my border. So I am totally confused.
Many thanks !
You need to define the style for your border.
border-style: solid;
Also, using
border: thin;
overrides any previous values you've set, use
border-width: thin;
instead.
In the site I am currently building I am having trouble getting my border colors right for <input> and <button> elements. I would like to have the top, left, and right borders to be the same color and then have the bottom border a different color. I can get the styling to work for any other element to work except for those two, and this issue only exist in IE9. Any help or explanation would be greatly appreciated.
Example of my problem: http://jsfiddle.net/NyG3x/24/
Try setting to borders separately.
border: 1px solid #000;
border-bottom: 5px solid #CE181E
This appears a bug in IE9. If you set the bottom border to 1px, the red border appears to show correctly. However, if you set the value to anything more than 1px, it seems to revert the border-color to the value of the other border-color.
UPDATE
A simple solution would be to remove the styling from the button, wrap the inner text of the button inside a div and style the div. This works in IE9 as shown here.
I know this is more markup, but it will surely solve the issue.
Apply the 1px border as usual to the three sides, but wrap your form elements in a tag, say a div tag and apply a 5px bottom border on the div tag.
HTML would look something like this:
<form id="button-set-two">
<div class="btn-wrapper">
<input class="btn-style" type="submit" value="Btn1" />
</div>
</form>
And CSS would look like this:
#button-set-two .btn-style{
border: 1px solid #000;
border-bottom:none;
color: #000;
float: left;
font-size: 1.6em;
margin-right: 5px;
padding: 2px 10px;
background: none;
}
#button-set-two .btn-wrapper{
border-bottom:5px solid #CE181E;
}
Here's an example: http://jsfiddle.net/JPQxX/
I tried this in Chrome and FF. In both browsers there's a 1-2px margin between the two inputs. I want to make the two elements touch without explicitly shifting the submit button to the left. Margin is already set to 0px;
Reset the border style and it should work http://jsfiddle.net/JPQxX/1/
input { border: 1px solid grey; }
The elements do touch, without a margin. If you inspect the submit button element in Firebug, you’ll see that it has no margin but a border that is 3px wide. What seems to be a small margin is part of the border. If you take a screen capture and magnify, you can see that the border has a 1px wide gray part with 1px wide transparent parts on each side of it, except at the rounded corners.
The default border is drawn by built-in routines in browsers, and modern browsers tend to use this kind of routines. If you set border properties for the button in CSS, browsers tend to switch to normal border drawing, so the button stops looking like a normal button and takes whatever shape you set. I don’t think you can completely simulate the default border appearance (getting rid just of the transparent part that causes the margin-like phenomenon), but the following might take you sufficiently close (on supporting browsers):
input[type="submit"] {
border: solid gray 1px;
border-radius: 4px;
background: #ddd;
}
Demo: http://jsfiddle.net/m2CSy/
I am trying to define a border around a div tag in HTML. In some browsers the border does not appear.
Here is my HTML code:
<div id="divActivites" name="divActivites" style="border:thin">
<textarea id="inActivities" name="inActivities" style="border:solid">
</textarea>
</div>
How do I set a border for an HTML div tag?
Try being explicit about all the border properties. For example:
border:1px solid black;
See Border shorthand property. Although the other bits are optional some browsers don't set the width or colour to a default you'd expect. In your case I'd bet that it's the width that's zero unless specified.
can use
border-width:2px;
border-style:solid;
border-color:black;
or as shorthand
border: 2px solid black
As per the W3C:
Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set.
In other words, you need to set a border style (e.g. solid) for the border to show up. border:thin only sets the width. Also, the color will by default be the same as the text color (which normally doesn't look good).
I recommend setting all three styles:
style="border: thin solid black"
You can use:
border-style: solid;
border-width: thin;
border-color: #FFFFFF;
You can change these as you see fit, though.
I guess this is where you are pointing at ..
<div id="divActivites" name="divActivites" style="border:thin">
<textarea id="inActivities" name="inActivities" style="border:solid">
</textarea>
</div>
Well. it must be written as border-width:thin
Here you go with the link (click here) check out the different types of Border-styles
you can also set the border width by writing the width in terms of pixels.. (like border-width:1px), minimum width is 1px.
You need to set more fields then just border-width. The style basically puts the border on the page. Width controls the thickness, and color tells it what color to make the border.
border-style: solid; border-width:thin; border-color: #FFFFFF;
.centerImge {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height:50%;
}
<div>
#foreach (var item in Model)
{
<span> <img src="#item.Thumbnail" class="centerImge" /></span>
<h3 style="text-align:center"> #item.CategoryName</h3>
}
</div>
In bootstrap 4, you can use border utilities like so.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.border-5 {
border-width: 5px !important;
}
</style>
<textarea class="border border-dark border-5">some content</textarea>