I have an <hr> element with a border, in Firefox it displayed nicely but in chrome, it has a split in the middle, does anyone know why this is and how to fix it?
How it should display:
How Chrome displays is:
CSS Styling:
hr {
width: 90vw;
border: 0.15em solid white;
margin-top: 1em;
}
Style only the top border to avoid 2 lines. The thickness of the top border is the height of the hr.
body {
background-color: black;
}
hr {
width: 90vw;
border: 0;
border-top: 0.15em solid white;
margin-top: 1em;
}
<hr>
Use only border-top, not border(which creates a rectangle with a border on all sides, as you can see it in Chrome). If you need it thicker, just change the thickness value.
body {
background: black;
margin: 0;
}
hr {
width: 90vw;
border-top: 0.15em solid white;
margin-top: 1em;
}
<hr />
try giving border-radius,
width: 90vw;
border: 0.15em solid black;
margin-top: 1em;
border-radius: 2px
}```
hope this will solve your query.
Related
I've got some text that needs the following:
border around the text
a ::before element that has its own border and background color
Basically, I want it to look like this:
So far, I've got this:
My CSS:
.caution {
border: 0.5pt solid black;
padding-left: 3pt;
padding-right: 3pt;
display: table;
}
.caution::before {
display: table-cell;
border: 0.5pt solid black;
background-color: #deddde;
text-align: center;
content: "caution";
}
My html:
<p class="caution">Caution text</p>
The result is that the ::before box is nested inside the .caution box, instead of overlapping. The gaps on the left and right are caused by the padding-left and padding-right statements.
I've also tried this without the display:table, that didn't help. I need the padding-left and padding-right to apply to the text (to ensure the text doesn't come right up to the border), but not to the ::before element. There's no selector that allows me to apply properties to 'all of .caution except the ::before element'.
How can I get the borders to behave the way I want them to?
You can try this - it's not perfect, but it's a start :)
.caution {
border: 0.5pt solid black;
display: inline-block;
max-width: 200px;
padding: 10px;
}
.caution::before {
display: block;
border-bottom: 0.5pt solid black;
margin: -10px;
margin-bottom: 10px;
background-color: #deddde;
text-align: center;
content: "Caution";
}
It will render the following:
Setting only border-bottom (as in answer by Yogendra Chauhan, though I only noticed that afterwards) can help:
.caution {
border: 0.5pt solid black;
padding-left: 3pt;
padding-right: 3pt;
display: block;
}
.caution::before {
border-bottom: 0.5pt solid black;
background-color: #deddde;
text-align: center;
content: "caution";
display: block;
margin: 0 -3pt;
}
However, you might see a small white line at the ends of the bottom border when you zoom to 6,400% in your PDF viewer.
Here is the working example:
.caution {
position: relative;
border: 1px solid #000000;
height: 200px;
width: 300px;
padding-left: 5px;
padding-right: 5px;
padding-top: 30px;
}
.caution::before {
position: absolute;
background-color: #deddde;
text-align: center;
content: "caution";
text-transform: capitalize;
display: block;
width: 100%;
border-bottom: 1px solid #000000;
top: 0;
left: 0;
line-height: 25px;
}
<div class="caution">Caution text</div>
I have a container with a child element in it. The container has a border radius of 0.3rem. My child element has a border as well. I would like my child's border to round at the same radius as the parent, but I can't seem to do it. My first approach was to just have the child match the parent's radius of 0.3rem but for some reason (even though the computed font size on both elements are the same) the borders don't line up perfectly:
My second approach was to use the commonly suggested overflow: hidden style on the parent container. Doing this without the child matching the parent's border radius does make the entire button perfectly follow the outline of the parent container, but now the child's border looks "cut off" in the corner:
Is there any way I can both follow the parent container's curve while keeping a matching border curve on the child element?
The border-radius of the inner element is the padding edge radius of the outer element, and
The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness.
—CSS Backgrounds and Borders Module Level 3, § 5.2. Corner Shaping
div {
border-radius: 1rem;
border-width: 5px;
}
span {
border-radius: 0 0 calc(1rem - 5px) calc(1rem - 5px);
border-width: 3px;
}
/* the rest is positioning and colors */
div {
position: absolute;
top: 2rem;
bottom: 2rem;
left: 2rem;
right: 2rem;
border-color: grey;
border-style: solid;
}
span {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 5rem;
border-color: #33f;
border-style: solid;
}
<div><span></span></div>
Unfortunately, no, there is no easy way to match border radius of nested objects. If you try to simply match, you'll end up with something like this (notice the sliver or white between the red and blue):
div {
display: inline-block;
border: 2px solid blue;
border-radius: 10px;
}
span {
display: block;
background: red;
height: 100px;
width: 100px;
border-radius: inherit;
}
<div>
<span></span>
</div>
In terms of the shape you're trying to draw, it's probably best to go along this (syntactically ugly) route:
body {
background: aliceblue;
box-sizing: border-box;
}
*, *::after, *::before {
box-sizing: inherit;
}
div > span:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
div > span:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: red;
border-color: blue;
border-style: solid;
}
span {
display: block;
height: 40px;
width: 80px;
background: white;
border-width: 2px;
}
<div>
<span></span>
<span></span>
<span></span>
</div>
Essentially, any time you're trying to match two curves of nested objects, it comes out nicer if you flatten the drawing logic. It's a hassle, but that's the best I've found for really solid results. You will have to use border-box to make it so objects are sized by the outside of their border rather than inside of it (content size... it's lame).
Your issue is that the parent div has a border around it. It looks like this is being done to offset it from the content below, similar to a drop-shadow.
div {
border-radius: 1rem;
box-sizing: border-box;
}
.outer {
width: 100px;
height: 100px;
background: lightgrey;
border: 3px solid black;
}
.inner {
width: calc(100px - 6px);
height: calc(50px - 6px);
position: relative;
top: 50px;
left: 0px;
background: red;
border-top-left-radius: unset;
border-top-right-radius: unset;
border: 3px solid blue;
}
<div class="outer">
<div class="inner"></div>
</div>
There are a couple ways you can solve this. You can make sure that the child element overlays the outer element, that way their borders and radiuses are the same. Your other option is to remove the border from the parent container.
div {
border-radius: 1rem;
box-sizing: border-box;
display: inline-block
}
.outer {
width: 100px;
height: 100px;
margin-left: 5px;
background: lightgrey;
border: 3px solid black;
}
.inner {
width: 100px;
height: 50px;
position: relative;
top: 50px;
left: -3px;
background: red;
border-top-left-radius: unset;
border-top-right-radius: unset;
border: 3px solid blue;
}
.outer2 {
border: none;
}
.inner2 {
width: 100px;
left: 0px;
height: 50px;
}
<div class="outer">
<div class="inner"></div>
</div>
<div class="outer outer2">
<div class="inner inner2"></div>
</div>
Dealing with these types of issues are always simpler when using box-sizing: border-box, but they're possible with content-box if you don't mind doing a little more math.
You can play around with it a little easier using this jsfiddle.
Set
border-radius: inherit;
to the inside element
Question: I'm trying to get all the elements to align and fit into one div without overflowing. Why are some div's sticking out if the parent div is set to overflow:hidden? How can I fix this?
Example: http://jsfiddle.net/YNS8b/
Thanks!
Code:
<div id = "top_bar" >
<div id="top_left_button" >border</div>
<div class="trapezoid-border"></div>
<div class="trapezoid"> border </div>
</div>
#top_bar{
background-color: #000;
border-bottom: 1px solid #666;
color: #222;
position:fixed;
left:0px;
top: 0px;
width:100%;
overflow:hidden;
height: 50%;
font-weight: normal;
white-space: nowrap;
color: white;
z-index:20;
line-height: 45px;
min-width:320px;
max-width: 320px;
max-height:48px;
border-radius: 5px;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
}
#top_bar:after {
content: '';
width: 10%;
display: inline-block;
font-size: 0;
line-height: 0
}
.trapezoid{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid #446DB2;
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 50px;
display: inline-block;
right:1px;
z-index: 100;
}
.trapezoid-border{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid rgba(225, 225, 225, 0.5); /* Color Changed will be pseudo-border color */
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 53px; /* Extra 3 pix when compared to .trapezoid class width */
display: inline-block;
right:1px;
}
#top_left_button {
color: white;
height: 100%;
overflow:hidden;
display: inline-block;
text-align: center;
vertical-align: middle;
}
#top_left_button{
width: 20%;
border-right: 2px solid #666;
background-color: #446DB2
}
At one time browsers supported rounded corners, but didn't always mask all of the contents that might appear within the curve of the border itself. Many solutions were suggested, including rounding any children that appear in proximity to the parents already-rounded corner, using proprietary features like a webkit mask, etc. Today, modern browsers will mask the contents far better, so this should no longer be an issue. In fact, opening this demo up in modern versions of Chrome and Internet Explorer reveal that the browser has itself corrected the behavior.
Additional discussion can be found here: How to make CSS3 rounded corners hide overflow.
I'm trying to do a blog stylish design with a "date block" to the left of parenting div. It works in IE and Chrome but in Firefox the top-parent div expands.
html
<div class="post_bg">
<div class="post_inner">
<div class="blue">date</div>
text
<br /><br />
</div>
</div>
Css
.post_bg {
width: 700px;
background-color: #f0f0f0;
outline: 1px solid #d8d8d8;
border-top: 1px solid #fff;
padding: 5px 5px 5px 5px;
}
.post_inner {
clear: both;
background-color: #fdfdfd;
border: 1px solid #d8d8d8;
}
.blue {
overflow: visible;
width: 40px;
height: 40px;
background-color: #55a4cc;
position: relative;
bottom: -5px;
right: 40px;
}
Here is a picture showing my problem:
And while I'm at it, how to I get my "text" to the top of the box?
To get the outline to work in Firefox replace:
outline: 1px solid #d8d8d8;
With:
box-shadow: 0 0 0 1px #d8d8d8;
To get the text aligned to the top make .post_inner position: relative; and .blue position: absolute;. Then adjust .blue's position accordingly.
Demo: http://jsfiddle.net/ThinkingStiff/8SyGV/
CSS:
.post_bg {
background-color: #f0f0f0;
border-top: 1px solid #fff;
left: 40px;
box-shadow: 0 0 0 1px #d8d8d8;
padding: 5px 5px 5px 5px;
position: relative;
width: 300px;
}
.post_inner {
background-color: #fdfdfd;
border: 1px solid #d8d8d8;
position: relative;
}
.blue {
background-color: #55a4cc;
height: 40px;
left: -40px;
position: absolute;
top: 0;
width: 40px;
}
HTML:
<div class="post_bg">
<div class="post_inner">
<div class="blue">date</div>
text
<br /><br />
</div>
</div>
This is a "bug" in Firefox 3.X as described here.
There is a workaround which I found here that uses :before to prepend an absolutely positioned container which applies the outline instead.
So for your code you would remove outline from .post_bg and add the following CSS to your stylesheet:
.post_bg:before {
bottom: 0px;
content: '';
left: 0px;
margin: 0;
outline: 1px solid #d8d8d8;
padding: 0;
position: absolute;
right: 0px;
top: -1px; /* -1 to accomodate border-top in .post_bg */
}
JSFiddle: http://jsfiddle.net/GqACN/
You should still use the new implementation of the .blue class by #ThinkingStiff to resolve the text issue mentioned in your question.
Update
This bug can be found here on bugzilla.
However, as pointed out by #BoltClock in the comments above, "there's nothing that specifies how outlines should be drawn with respect to positioned descendants" - so to say this is a bug is incorrect since the spec is not clear on how it is to be implemented. Mozilla have just interpreted the specification in a different way to Google and Microsoft.
Any idea on how I can get round corners work with multiple borders?
The box will be dynamic, depending what will be inputed into the box, so I can't add static width or height.
body { background: #d2d1d0; }
#box {
border-radius: 15px;
background: #f4f4f4;
border: 1px solid #bbbbbb;
width: 100%;
height: 100%;
margin: 10px auto;
position: relative;
}
DIV#box, #box:before, #box:after {
-moz-border-radius: 15px;
border-radius: 15px;
}
#box:before {
border-radius: 15px;
border: 1px solid white;
width: 99%;
height: 94%;
content: '';
position: absolute;
}
#box:after {
border-radius: 15px;
content: '';
position: absolute;
border: 1px solid #bbbbbb;
width: 98%;
height: 90%;
left: 1px; top: 1px;
}
HTML
<div id="box">Hello World!!!!<br>THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</div>
The problem I am currently having is when I stretch window not all borders stretch symmetrically, so how can I fix that? FYI I am currently interested getting CSS working in FF and Chrome.
There are a few ways to get multiple borders with round corners. I personally go for a method that uses shadows. For your html code you could do something like this.
The HTML
<div id="box">
Hello World!!!!<br>
THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.
</div>
The CSS
#box{
border-radius: 15px;
background: #f4f4f4;
border: 3px solid #bbbbbb;
box-shadow: 0 0 0 3px #8B2323,
0 0 0 6px #FF7F00,
0 0 0 9px #458B00;
width: 100%;
height: 100%;
margin: 10px auto;
position: relative;
}
Demo: http://jsfiddle.net/GdSfh/
I suggest if you want to find out more on multiple borders please read my tutorial on Multiple borders in css as it has a few other methods that might help you in the future. If you want to find more about shadows please also refer to my tutorial Shadows in css.
<div id="box">
<p>Hello World!!!!<br>
THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</p>
Above is for the HTML, below is for the CSS.
body { background: #d2d1d0; }
#box {
background: #F4F4F4;
border: 3px solid blue;
position: relative;
height: 100%;
width: 100%;
}
#box p {
padding: 10px;
}
#box:before {
-moz-border-radius: 15px;
border-radius: 15px;
}
#box {
-moz-border-radius: 9px;
border-radius: 9px;
}
#box:after {
-moz-border-radius: 12px;
border-radius: 12px;
}
#box:before {
border: 3px solid red;
content: '';
position: absolute;
top: -9px;
right: -9px;
bottom: -9px;
left: -9px;
}
#box:after {
border: 3px solid green;
content: '';
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
}
http://jsfiddle.net/H7QjP/7/ [Live Example with code]
Like this. Credits to to jnpcl for giving me something to build off, I just changed the border radii so that they lined up a little tighter.
The only CSS solution I can offer is limited to a double border, with the space between those borders the same colour as the background of the bordered element, for example the html:
<div id="box">
<p>Some content</p>
</div>
Coupled to the css:
#box {
border: 10px double #f90;
border-radius: 1.5em;
padding: 1em;
color: #000;
background-color: #ffa;
}
Gives a JS Fiddle demo...
Just found another cleaner way to do it
Live demo and code here: http://jsfiddle.net/mYGsh/1/
[This demo has 8 different borders]
The HTML:
<p class="gradient-border">This is an example of a box with a gradient border. This example will currently work in Mozilla and Firefox browsers.</p>
The CSS:
.gradient-border {
border: 8px solid #000;
-moz-border-radius: 12px;
-moz-border-bottom-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
-moz-border-top-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
-moz-border-left-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
-moz-border-right-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
padding: 5px 5px 5px 15px;
}
I came up with this code for a linked image using an inline block border wrapped in a box shadow with a 2nd box shadow for a 2 layer border with a shadow, 3 layers total & No css styling needed.
inline block creates the 1st border then a box shadow creates the 2nd & icing on the cake adds the shadow followed by the rounding code that captures the inline block border as well.
To use it for text, just change image style to span style & replace image src with text & remove the link if you don't need it.
<a href="http://url" target="_blank">
<img style="display:inline-block;padding:1px;padding-left:2px;padding-top:10px;padding-bottom:10px;width:130px;border: 5px solid#001aff; box-shadow:0px 0px 0px 1px #000000, 0px 0px 25px 14px #001EA3;background: #000000;
border-radius: 5px;
-moz-border-radius: 5px
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;"
src="http://image.gif" height="41" align="absmiddle" /></a>
I suggest using the excellent jQuery round corner plugin.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1
To add to David's solution :
The double border is fairly limited. However, if you are willing to modify your markup, you can solve your problem by doing :
<div id="outerbox">
<div id="box">Hello World!!!!<br>THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</div>
</div>
In your CSS :
#box
{
border-radius: 15px;
border: 1px solid #bbbbbb;
width: 100%;
height: 100%;
position: relative;
}
#outerbox
{
padding:10px;
border : 1px solid #bbbbbb;
background: #f4f4f4;
border-radius: 15px;
}
This will allow you to set the background color between the two borders to what you want.
It will also let you play with the width of your border.
http://jsfiddle.net/rPsdK/1/
Try this one:
Live Demo
<style type="text/css">
body { background: #d2d1d0; }
#box {
background: #F4F4F4;
border: 1px solid blue;
position: relative;
height: 100%;
width: 100%;
}
#box p { padding: 10px; }
#box, #box:before, #box:after {
-moz-border-radius: 15px;
border-radius: 15px;
}
#box:before {
border: 1px solid red;
content: '';
position: absolute;
top: -7px;
right: -7px;
bottom: -7px;
left: -7px;
}
#box:after {
border: 1px solid green;
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
}
</style>
<div id="box">
<p>Hello World!!!!<br>
THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</p>
</div>