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.
Related
This question already has an answer here:
How to do an inset border with a border radius on an image
(1 answer)
Closed 1 year ago.
I am trying to get a white border within the photo. Currently I have tried everything and come closest to the intended result with outline, only it is not possible to round it off.
Anyone have a solution for this?
It's about the fine white line, which would only need to be rounded off.
Code:
img {
outline: 1px solid white;
outline-offset: -10px;
}
Use a pseudo-element on top of your image.
img {
height: 75vh;
width: auto;
border-radius: 1rem;
display: block;
z-index: -1;
position: relative;
}
div {
display: inline-block;
margin: 1em;
position: relative;
}
div:after {
content: "";
position: absolute;
inset: 5px;
border: 2px solid white;
border-radius: 14px;
}
<div>
<img src="https://images.unsplash.com/photo-1625516838246-ff33acad73ec?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODAwMTMzNQ&ixlib=rb-1.2.1&q=85" alt="">
</div>
You can use two div blocks. External - as a container, with background image (or with img tag), and internal for line. It's a little bit verbose way, but very flexible
.external {
width: 100px;
height: 100px;
background-image: url('https://picsum.photos/536/354');
background-size: cover;
text-align: center;
position: relative;
border: 1px black solid;
border-radius: 15px;
}
.internal {
border-radius: 5px;
border: 1px red solid;
width: calc(90% - 2px);
height: calc(90% - 2px);
position: absolute;
top: 5%;
left: 5%;
}
<div class="external">
<div class="internal"></div>
</div>
This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 2 years ago.
I'm trying to create a border on a div with two different color on the top left and the bottom right.
Can't find solution, with images or directly on css.
Please refer the below example.
You can use position set toabsolute for the two red sections and they can be positioned with respect to the div with class box, which has its position set to relative.
.box {
background-color: gray;
height: 400px;
width: 400px;
position: relative;
}
.top-left {
position: absolute;
top: 10px;
left: 10px;
border-left: 10px solid darkblue;
border-top: 10px solid darkblue;
height: 30px;
width: 30px;
}
.bottom-right {
position: absolute;
bottom: 10px;
right: 10px;
border-bottom: 10px solid red;
border-right: 10px solid red;
height: 30px;
width: 30px;
}
<div class="box">
<div class="top-left"></div>
<div class="bottom-right"></div>
</div>
You can follow the example of Naren Murali or you can create pseudo-elements, so you do not need as much HTML.
I created two pseudo-elements :before and :after
:before
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
:after
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background: grey;
}
div:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 5px;
left: 5px;
border-top: 5px solid blue;
border-left: 5px solid blue;
}
div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
right: 5px;
border-bottom: 5px solid red;
border-right: 5px solid red;
}
<div></div>
No need extra elements or pseudo elements, you can do easily with multiple background:
.box {
height: 200px;
width: 400px;
background:
linear-gradient(red,red) 0 0,
linear-gradient(red,red) 0 0,
linear-gradient(blue,blue) 100% 100%,
linear-gradient(blue,blue) 100% 100%,
#ccc;
padding:5px;
background-size:80px 20px,20px 80px;
background-origin:content-box;
background-repeat:no-repeat;
}
<div class="box">
</div>
Is there a way how to use css (ideal) to draw element border but just a part of the line (in the image below left and right border)?
Yes, you can, like this, and even IE8 can do this:
div {
position: relative;
width: 100px;
padding: 10px;
}
div:before {
content: " ";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30px;
border: 1px solid black;
border-top-width: 0;
}
<div>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div>
Please try this:
.box {
position: relative;
min-height: 100px;
padding-bottom: 10px;
}
.box .text {
margin: 10px;
}
.box .bordered {
position: absolute;
bottom: 0;
height: 30%;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
width: 100%;
z-index: 1000;
}
<div class="box">
<div class="text">Hell world!</div>
<div class="bordered"></div>
</div>
see the fiddle here: https://jsfiddle.net/42zgo5aa/3/
This is my improvements on John's answer.
I just fiddled with negative margins to make the border come up and wrap the container a bit.
.box {
position: relative;
min-height: 100px;
padding: 0 15px;
padding-bottom: 10px;
}
.box .bordered {
position: absolute;
height: 20px;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
width: 100%;
margin: -10px;
z-index: 1000;
}
<div class="box">
Hello world!
<br/>You are beautiful!
<div class="bordered"></div>
</div>
I'm sure there's no (regular) way to do this in CSS 2.1, and I'm not aware that CSS 3 supports this either. You may be able to do some trickery like creating a separate element behind the text, that is less high and has just a left, right, and bottom border. But that's not a solution one really wants to go for, of course.
I'm trying to fill an element with multiple colors using CSS. Currently, I have this CSS:
div.container {
width: 100px;
border: 1px dotted;
font-size: 10px;
}
.box {
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
}
fiddle
Problem is that the contents are not over the border, so it looks like this:
How can I get the contents of span class="box" to stay in the middle of the element (i.e. over the colored circle)?
How about using absolute and relative positions, and making the circle as a pseudo element.
DEMO: http://jsfiddle.net/d0cv4bc8/8/
div.container {
width: 100px;
border: 1px dotted;
font-size: 12px;
}
.box {
position: relative;
}
.box::before {
content: "";
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
position: absolute;
z-index: -1;
}
Only way I can get the contents centered vertically and horizontally is to put contents inside a span, moved left and up by half of box's border width.
http://jsfiddle.net/d0cv4bc8/11/
CSS
.box .contents {
display:inline-block;
position: relative;
left: -3px;
top: -3px;
}
HTML
<div class="container">
<span class="box"><span class="contents">1</span></span>
</div>
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>