I tried the following code css3 style for 5 px wide horizontal line
<hr style=" border: solid 1px red;padding-top:10px; margin:25px auto 15px auto;clear:both" />
but I am getting 5px wide red rectangle.
Please advise me with a proper CSS3 style code.
As long as the element has the right width, a simple:
border-bottom:5px solid red;
Will do the trick.
You should use width and height properties instead of border:
width: 5px;
height: 1px;
color: red;
http://www.sovavsiti.cz/css/hr.html
Just use the "border-width" property and set it to 5px.
<hr style="border-width: 5px !important;">
Get rid of the top-padding, and use the border-bottom suggested above... http://jsfiddle.net/ZdLfJ/
My CSS for HR Line Styling;
.line_height { height:4px; }
.line_width { width:100%; }
.line_hcenter { margin-left: auto; margin-right: auto; }
.line_vcenter { margin-top: 10px; margin-bottom: 10px; }
.line_color { color:black; }
.line_bgcolor { background-color:black; }
.line_bordercolor { border-top: solid black; border-bottom: solid black; }
Add these classes to the hr tag.
All three color ( color , bgcolor, bordercolor ) classes are needed to get a solid colored line across.
Classes .color and .bgcolor needed for browser cross compatibility or else you just get double lines.
Dont use any other thing after border property just make 5px instead of 1 px in border.
I.e
Related
actually I am trying to make a dotted line with CSS I want it in circular form but I am getting it in square
The code I am using is
hr {border-style: none; border-top-style: dotted; border-color: grey; border-width: 6px; width: 5%; }
The result I am getting is
The result I want is
can anyone help me with that please.
The dotted keyword makes square "dots" in most browsers. You'll need to use a custom border image if you want to achieve the effect using the border property. You could also use a background image.
If you want to achieve a similar effect without an image, one approach would be to use multiple box shadows:
hr {
border: none;
width: 1rem;
height: 1rem;
background: lightgray;
border-radius: 1rem;
box-shadow:
-4rem 0 lightgray,
-2rem 0 lightgray,
2rem 0 lightgray,
4rem 0 lightgray;
}
<hr>
Use radial-gradient()
.hr {
height:20px;
background:radial-gradient(circle closest-side,grey 97%,transparent)
0 0/30px 100%; /* 20px + 10px of distance between circles */
}
<div class="hr"></div>
To avoid having partial circles:
.hr {
height:20px;
background:radial-gradient(circle closest-side,grey 97%,transparent)
0 0/30px 100% round;
}
<div class="hr"></div>
You have it right in your code. I simplified it a bit by setting border: none to undo the default border of <hr />. Then I set all of the top border's styles at once with border-top: dotted grey 15px:
hr {
width: 56%;
border: none;
border-top: dotted grey 15px;
}
<hr />
Check it out:
That weird or what?
Here's the CSS:
.highlight {
display: inline-block;
border-radius: 5px;
margin: 10px;
border: 1px solid gray;
}
How do I lose the holes?
To answer your question...
Yes, that is weird but not that weird.
In terms of fixing it...
Well that depends on the HTML you have there. Assuming (as i have) that its a textarea inside a div with rounded corners then you should be able to use overflow:hidden to ensure the textarea's corners are clipped. EG:
.highlight {
display: inline-block;
border-radius: 5px;
margin: 10px;
border: 1px solid #333;
background:white;
overflow:hidden; /* <- try adding this */
transform:translateY(100%) scale(3); /* <- nothing to do with the solution - just zooming in so you can see the corner */
}
textarea {
border: none;
background:red;
}
<div class="highlight">
<textarea>
It not that weird
</textarea>
</div>
I would like to create a header that spans over 1 or two lines vertically. I would like to align these headers via the bottom line. I have created a jsfiddle page to demonstrate this:
http://jsfiddle.net/S35Db/
HTML:
<h3>ABC</h3><h3>DEF JEH</h3>
CSS:
h3 {
float:left;
border: 1px solid grey;
padding:10px;
margin: 5px;
max-width:3em;
height:3em;
}
What I would like to do is align the ABC to the JEH. How do I go about doing this? Do I need to create container around the header?
Thanks
CSS :
h3 {
float:left;
border: 1px solid grey;
padding:10px;
margin: 5px;
max-width:3em;
height:3em;
}
.bottom {
line-height:65px;
}
HTML :
<h3 class="bottom">ABC</h3>
<h3>DEF JEH</h3>
Try this I think ie. what you need.
Yes you need to keep one container around it. Also remove float element and apply table-cell property like below.
div{display:table;height:3em;}
h3 {
border: 1px solid grey;
padding:10px;
margin: 5px;
max-width:3em;
border: 1px solid grey;
height: 100%;
vertical-align: bottom;
display:table-cell;
}
DEMO
you can provide line-height to your first header.
Fiddle
How do I cut the shared border line between these two divs? I want the top small div to have border on three sides expect bottom and the larder div below that to have only top border but leaving the shared border. So it will look like a line running across both divs upper borders.
I tried overlaying top div on the bottom. But Not getting what I want.
.ihead {
background-color: #EEE;
width: 15em;
height: 3em;
text-align:center center;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:none;
}
.ibody {
background-color: #EEE;
width: 60em;
height:20em;
margin-top:3em;
border-top:1px solid black;
z-index: 10;
}
<div class="ihead"><h>Hello !</h></div>
<div class="ibody">......</div>
From -
To -
The normal way you'd achieve this effect is to have the box on top move down over the top of it's border. In your example, you can achieve this by adding position: relative; bottom: -1px to your .ihead class and removing the margin-top: 3em from your .ibody class.
See the jsFiddle.
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
<div class="bordered"><h1>Test1</h1></div>
<div class="bordered"><h1>Test2</h1></div>
<div class="bordered"><h1>Test3</h1></div>
This question was the first that popped up for me so i felt it was best if i answered it properly unlike the accepted answer above.
Using css:
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
I have a rectangular div, like the one above. I want to remove the bottom border (from C to D) in my div. How can I do this?.
Edit: Here is my CSS:
#index-03 {
position: absolute;
border: .1px solid #900;
border-width: .1px;
border-style: solid;
border-color: #900;
left: 0px;
top: 102px;
width: 900px;
height: 27px;
}
<div id="index-03"
style="background-color:limegreen; width:300px; height:75px;">
</div>
Just add in: border-bottom: none;
#index-03 {
position:absolute;
border: .1px solid #900;
border-bottom: none;
left:0px;
top:102px;
width:900px;
height:27px;
}
You can either set
border-bottom: none;
or
border-bottom: 0;
One sets the border-style to none.
One sets the border-width to 0px.
div {
border: 3px solid #900;
background-color: limegreen;
width: 28vw;
height: 10vw;
margin: 1vw;
text-align: center;
float: left;
}
.stylenone {
border-bottom: none;
}
.widthzero {
border-bottom: 0;
}
<div>
(full border)
</div>
<div class="stylenone">
(style)<br><br>
border-bottom: none;
</div>
<div class="widthzero">
(width)<br><br>
border-bottom: 0;
</div>
Side Note:
If you ever have to track down why a border is not showing when you expect it to,
It is also good to know that either of these could be the culprit.
Also verify the border-color is not the same as the background-color.
You seem to misunderstand the box model - in CSS you provide points for the top and left and then width and height - these are all that are needed for a box to be placed with exact measurements.
The width property is what your C-D is, but it is also what A-B is. If you omit it, the div will not have a defined width and the width will be defined by its contents.
Update (following the comments on the question:
Add a border-bottom-style: none; to your CSS to remove this style from the bottom only.
You could just set the width to auto. Then the width of the div will equal 0 if it has no content.
width:auto;