Here is the jsfiddle for reference: http://jsfiddle.net/4devvjyv/1/
I'm trying to get the "Section" box to go above the gray line so that it looks like the "Section" box is centered around the line. But negative margins are not pushing the box above the line.
.divider {
margin-top: 6px;
border-top: 2px solid gray;
font-size: 10px;
position: relative;
}
.divider-text {
position: relative;
border: 1px solid black;
background-color: white;
display: inline-block;
padding: 0px 5px;
margin-top: -200px;
}
The divider is the line, and the divider-text is the "Section" box. I put a margin-top of 6px for the divider just so I wouldn't mess up the spacing between the two content because I would like the "Section" box to be 6px above the line and 8px below the line.
Does anyone know why it's not working? I tried playing around with a negative left margin and the "Section" box behaved as it should.
Updated your jsfiddle
Use top: -20px instead of margin-top:-200px. I've use -20px because -200px will float way high and cannot be seen.
.divider-text {
position: relative;
border: 1px solid black;
background-color: white;
display: inline-block;
padding: 0px 5px;
top: -20px;
}
another solution would be
.divider-text {
position: absolute;
border: 1px solid black;
background-color: white;
display: inline-block;
padding: 0px 5px;
margin: -20px; // making it center.
}
releasing the element from it's parent element (position: absolute) will make the element float, does following the negative margin.
The element is still under its parent element so any floating styles will not go beyond its parent element unless you free it by, float, position:absolute, or display:block. But display block does not actually release the element from its parent but moves it to the next. -- need anyone's input on this though.
I am simply trying to achieve the same effect as in the image below*. I want the Header to have two borders, one is lighter than the other to give it an embossed feel.
Before I asked this question on here, I have already done some research and tried ideas inspired from websites like: CSS-Tricks, Daverupert ect... But they are adding Outlines - and after trying that it didn't really work on modern browsers so how about the old ones!
*Since I am now allowed to post an image at this time, please refer to this link for an image: http://postimg.org/image/4b6ne0qod/
Please take a look at my website here: leo.meeped.co.uk Look at the header - you will also notice that it has a shadow after the think border that makes it look like it's edge has been folded.
Update: I very like this folding effect, however it makes the header fade out a bit / not stand-out when you scroll down to a white or gray page - as it seem like the shadow blend with the page since they are a very relative colours. So the idea was to add anther border just under the current border to make to emphasise it's edge.
Hope my question is clear, I am looking for your opinions and help.
In case you want the HTML and CSS of my site then here it is:
<!--Header--><header>
<div id="headerWrapper">
<div id="headerContent">
<div id="headerLogo">
<img alt="loai design studio logo" src="assets/elements/logo.png"/>
</div>
<nav><ul id="mainMenu" class="snapjs-expand-left">
<li>Home</li>
<li>Portfolio
<li>About Me</li>
<li><a class="active" href="contact.html">Contact Me</a></li>
<li>Blog</li>
</ul></nav>
</div>
</div>
</header>
/*HEADER////////////////////////////////////////////*/
/*Header Wrapper*/#headerWrapper {
background-color: #FFFFFF;
border-bottom: 5px solid #E8E8E8;
width: 100%;
position: fixed;
top: 0; left: 0;
z-index: 1000;
-webkit-box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
-moz-box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
}
/*Header Content Container*/#headerContent {
padding: 0 20px;
}
/*Header Logo*/
#headerLogo {
width: 130px;
margin: 19px 0;
float: left;
}
/*Main Menu*/
#mainMenu {
float: right;
margin: 17px 0;
}
#mainMenu li {
float: left;
}
#mainMenu a {
padding: 10px 15px;
margin-left: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#mainMenu a:hover {
color: #FFFFFF;
background-color: #4E6C98;
}
#mainMenu a.active {
color: #4E6C98;
cursor: default;
}
#mainMenu a.active:hover {
background-color: rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0);
background: transparent;
}
If you simply want two borders without using CSS's outline property, why don't you simply create a border bottom for div#headerWrapper and one for div#headerContent making that of headerWrapper darker:
div#headerWrapper
{
border-bottom: solid 1px #3D9ED5;
}
div#headerContent
{
border-bottom: solid 1px #81CEFA;
background-color: #54BEFB;
}
If you want the exact appearance of your picture, you can do so by adding the following code (assuming that the part below the border should be empty):
header
{
height: 50px;
background-color: #FBFBFB;
}
If text should be inserted into the lower half of the picture, add it after the outer div (in header) and remove the height from the CSS.
Try using CSS box shadows to create "shadows". For example:
#headerWrapper {
box-shadow: 0 1px 0 rgba(255,0,0,0.8), 0 2px 0 rgba(0,255,0,0.8);
}
Each new shadow should be separated by a comma.
Does this do what you were wanting?
The browser support is pretty good for box shadows now but you might want to keep it in mind. Pretty much everything except IE8 supports it if you use all the vendor prefixes, for more info see: http://caniuse.com/css-boxshadow
<div class="row">
some content
<div class="info-box">
some other content
</div>
</div>
.row {
float: left;
margin-bottom: 1.5%;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
background-color: rgb(250, 250, 250);
width: 685px;
-webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}
.row:hover {
background-color: rgb(240, 245, 245);
-moz-box-shadow: inset 0 0 5px #4d4d4d;
-webkit-box-shadow: inset 0 0 5px #4d4d4d;
box-shadow: inset 0 0 5px #4d4d4d;
}
.info-box {
position: relative;
border-left: 1px solid #e3e3e3;
padding: 15px;
width: 170px;
font-size: 0.93em;
color: #363636;
float: left;
}
Alright, I have this info box inside row. Since at .row:hover, I'm creating an inner shadow. The border-left of the info-box seems to show on top of the shadow when you hover on row.
My question is if you can make the shadow on top of the border. Thanks in advance.
Note: z-index doesn't work for me.
Of course it's on top: the child has to appear above the parent, otherwise it'd be hidden by it. To achieve the desired effect, you would have to apply the shadow to an element that came above, ie after, the .info-box. You can achieve this with no additional markup by using the :after pseudo-element.
If you take a look at this fiddle, I've achieved the basic proposition — although you may want to shift the border to the pseudo element or adjust dimensions to get it positioned just right.
Basic guide to what I did:
Gave .row the CSS position: relative so we can place children in relation to it.
Moved everything apart from the background property in the .row:hover rule to a new .row:hover:after rule.
Added content: ' ' to force the pseudo element to display.
Added positioning, height and width, top and left to make the pseudo element cover available width.
EDIT: Felipe points out in the comments that any attempt to click in through to object within .row will be intercepted by the :after element, but suggests you can use pointer events set to pointer-events: none to mitigate the problem (in everything other than IE and Opera). I've updated my example to show this in action.
This doesn't seem to be a problem in Firefox. But noticeable in Safari
I have a div with rounded corners, an inset border and a specified width. You can see it at http://jsfiddle.net/jsoningram/fek5n/
You'll notice the div breaks about midway down on the left. Well actually it doesn't break but appears to. If I change the color of the border in the .beveled class to black it's visible. I can also remove the border-style and the "missing link" is returned.
The html:
<div id="sub_nav" class="rounded_10 beveled">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
The css:
#sub_nav {
position: relative;
background: #e6e6e6;
width: 164px;
min-height: 300px;
float: left;
padding: 0px 0px 27px 0px;
z-index: 5;
margin: 10px 0 0 10px;
}
#sub_nav li {
position: relative;
height: 50px;
width: 160px;
background: #ccc;
margin: 0px 0px 1px 1px;
}
#sub_nav li:first-child {
margin-top: 27px;
}
.rounded_10 {
-webkit-broder-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior:url(_/inc/PIE.htc);
}
.beveled {
border: 1px solid #fbfbfb;
border-style: inset;
}
Thanks in advance...
This has to do with how border-style:inset works, and the fact that your border and background colors are so close to one another.
Inset is a 3-d style effect, but with a 1px border, it's having difficulty figuring out how to draw the effect. If you change
.beveled {border: 30px solid red; border-style:inset;}
You'll see what it's trying to accomplish. It takes the base color and then darkens/lightens it to make the effect. You light grey is getting lightening to white for a section of it.
So, remove the border-style:inset, and then change the border color, and you should be in business.
.beveled {border: 1px solid #ccc;}
I did a little bit of experimenting and found that the same problem appears when you manually create an inset border by setting each side like this.
.beveled {
border-top: 2px solid #aaa;
border-left: 2px solid #aaa;
border-right: 2px solid #efefef;
}'
I created a jsFiddle with the bare minimum css to show this problem.
http://jsfiddle.net/MdE7q/
It has something to do with the width to height ratio. Can't explain it but change the width on my example to 400px and the gap goes away. In fact the gap doesn't appear at all when width is greater than height, only when height is greater than width.
Also, this looks perfect in IE9+, which leads me to believe it is a rendering problem in webkit and firefox.
Maybe modernizr would help here. http://modernizr.com/
Wow. This is weird. If you make #sub_nav 180px wide then it seems to fix it.
http://jsfiddle.net/fek5n/11/
I guess the title is kind of hard to understand, so I'll explain.
I am trying to achieve this effect:
(a box which has rounded corners and its border, which also has rounded borders).
I've managed to do this, by using the background-clip property:
(rounded corners for border but not for inner box)
The question is, how can I achieve rounded corners for the inner box?
Thank you!
EDIT
The HTML I am using:
<header class="body template-bg template-border radius-all">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
And the CSS:
.radius-all {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.template-bg {
background: #FFF;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
.template-border {
border: 5px solid rgba(255, 255, 255, 0.2);
}
Inner border calculations
First, you'll need to remove -vendor-background-clip: padding-box or set them to border-box the default in order to achieve the inner border radius.
The inner border radius is calculated as the difference of the outer border radius (border-radius) and the border width (border-width) such that
inner border radius = outer border radius - border width
Whenever the border-width is greater than the border-radius, the inner border radius is negative and you get some awkward inverted corners. Currently, I don't believe there is a property for adjusting the inner-border-radius, so you'll need to calculate it manually.
In your case:
inner border radius = 6px - 5px = 1px
Your new CSS should be:
.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }
Simply subtract the border-radius (6px) values from the border-width value (5px) in order to achieve your desired inner-border-radius:
Code that works for me
Tested on Firefox 3.x, Google Chrome, and Safari 5.0
.radius-all { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); } /* Note that white on white does not distinguish a border */
Adding color overlays in JavaScript
<script type="text/javascript">
var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;;
// insert opacity decreasing code here for hexadecimal
var header = document.getElementsByTagName('header')[0];
header.style.backgroundColor = bodyBgColor;
</script>
I'm not entirely sure how to do hexadecimal arithmetic in JavaScript but I'm sure you can find an algorithm in Google.
Applying General Borders
Are you using a separate box <div> for your border through its background property? If so, you'll need to apply border-radius and its vendor specific properties on both the border box and the inner box:
<div id="border-box" style="border-radius: 5px;">
<div id="inner-box" style="border-radius: 5px;">
</div>
</div>
A much more efficient way would simply have the inner-box manage its own border:
<div id="inner-box" style="border: 4px solid blue; border-radius: 5px">
<!-- Content -->
</div>
CSS-wise, you could just declare a .rounded-border class and apply it to every box that will have rounded borders:
.rounded-borders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
And apply the class to any boxes that will have rounded borders:
<div id="border-box" class="rounded-borders">
<div id="inner-box" class="rounded-borders">
</div>
</div>
For a single box element, you'll still be required to declare the border size in order to be shown:
<style type="text/css">
#inner-box { border: 4px solid blue; }
</style>
<div id="inner-box" class="rounded-borders">
</div>
Another solution is to have matching inner and outer borders combined with border-radius is to "fake" the border using the <spread-radius> value of the box-shadow property. This produces a solid shadow which can easily pass for a regular border.
For instance, to achieve a 4px border and a 4px white border radius, try this:
/* rounded corners */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 0px 4px #fff;
box-shadow: 0px 0px 0px 4px #fff;
If you want to add a "real" drop shadow to the entire container, you can simply chain your shadow statements like so:
/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
1px 1px 8px 0 rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
1px 1px 8px 0 rgba(0,0,0,0.4);
box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
1px 1px 8px 0 rgba(0,0,0,0.4);
Note: Keep in mind here that the order of the statements is the order in which it will be rendered.
The only thing to beware of is that the initial "faux border" will overlap the first X pixels (where X is the width of the border) of any shadow you want beneath it (and combine, if you're using RGBa opacity on it below 100%.)
So it won't work in all situations, but it'll get the majority. I use this pretty frequently when regular borders are not ideal.
Since there is no such thing as inner-border-radius for CSS, the browsers default it to border-radius - border-width. If you don't like that, the typical solution is to create two divs with borders to mimic the inner border radius but this solution brings in more design into the html. It is also a pain if it's a common border template used through out the site.
I managed to figure a way to keep it all in css by producing the inner div using :after and content: "". So for your case it would be:
.template-border {
position: relative;
border-radius: 5px;
background-color: #000;
border: 10px solid #000;
z-index: -2;
}
.template-border:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px;
background-color: #FFF;
z-index: -1;
}
Most of the solutions on this page are from the web stone ages (before 2013 - i.e. even before IE11).
Since IE11, the way to do this is easy...
Just in case someone is Googling for this answer after 2013 (it's almost 2020 today) and got sent here, here is the most simple, compatible, and easy way to do this, even if you need to support IE11...
(Feel free to change the px values for the look you want, or better yet, use variables and transpile with Stylus or SASS)
Example HTML...
<div class="wrapper">
<div class="content">
your content goes here
</div>
</div>
Example CSS...
.wrapper {
border-radius: 25px;
border: solid 25px blue;
background-color: blue;
}
.content {
border-radius: 10px;
background-color: white;
}
...Presto.
The problem is not the coding of the CSS but the mathematics of a circle.
Essentially your border-inner-radius (I know this property does not exist) is equal to the border-radius - border-width.
Quite simply work out what you want your inner radius to be and then add the width of the border to achieve the desired effect.
border-inner-radius + border-width = border-radius
Based on Leo Wu's idea, here it is my solution:
.my-div
{
background-color: white;
border: solid 20px black;
border-radius: 10px;
box-shadow: 0 0 10px black;
height: 100px;
left: 30px;
position: relative;
top: 20px;
width: 200px;
}
.my-div:before
{
background-color: white;
border-radius: 5px;
content: "";
display: block;
height: calc(100% + 20px);
left: -10px;
position: absolute;
top: -10px;
width: calc(100% + 20px);
z-index: 1;
}
.some-content
{
height: calc(100% + 20px);
left: -10px;
position: relative;
top: -10px;
width: calc(100% + 20px);
z-index: 3;
}
.some-header
{
background-color: green;
border-radius: 5px 5px 0 0;
height: 30px;
}
<html>
<body>
<div class="my-div">
<div class="some-content">
<div class="some-header">my title</div>
<div>some other content</div>
</div>
</div>
</body>
</html>
You need to have two div elements, one inside the other, and use a cross browser rounded corner css, like this:
.small-rounded {
border: 1px solid ##000;
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
border-radius: 5px;
}
Today I run into this "problem". My solution uses two divs and overlaps the inner div on the outer one.
A good thing about my solution is that it does not alter the background color (it can be transparent).
You can control the outer border radius by modifying the outer-border class and the inner border with the inner-border class.
.outer-border {
border: 10px solid #20b2aa;
border-radius: 5px;
display: flex;
flex-direction: column;
min-height: 100px;
}
.inner-border, .inner-border-evidence {
flex: 1;
border: 10px solid #20b2aa;
border-radius: 30px;
margin: -9px;
}
.inner-border-evidence {
border-color: #0a3b8a;
}
<div class="outer-border">
<div class="inner-border">
</div>
</div>
<br />
<p>Here you can see how the inner div overlaps the outer div.</p>
<div class="outer-border">
<div class="inner-border-evidence">
</div>
</div>
Another idea is to consider multiple radial-gradient to simulate the inner radius and you can control the outer and inner radius like you want without the need of any extra element:
.box {
width:150px;
height:150px;
margin:10px;
border:10px solid red;
border-radius:10px; /* Outer Radius*/
background:
radial-gradient(farthest-side at bottom right,#0000 98%,red) top left,
radial-gradient(farthest-side at top right,#0000 98%,red) bottom left,
radial-gradient(farthest-side at bottom left ,#0000 98%,red) top right,
radial-gradient(farthest-side at top left ,#0000 98%,red) bottom right,
blue;
background-size:25px 25px; /* inner Radius*/
background-repeat:no-repeat;
background-origin:padding-box;
}
<div class="box">
</div>
You can also have different values for each side:
.box {
width:150px;
height:150px;
margin:10px;
border:10px solid red;
border-radius:10px; /* Outer Radius*/
background:
radial-gradient(farthest-side at bottom right,#0000 98%,red) top left / 30px 30px,
radial-gradient(farthest-side at top right,#0000 98%,red) bottom left / 20px 20px,
radial-gradient(farthest-side at bottom left ,#0000 98%,red) top right / 50px 50px,
radial-gradient(farthest-side at top left ,#0000 98%,red) bottom right/ 10px 10px,
blue;
background-repeat:no-repeat;
background-origin:padding-box;
}
<div class="box">
</div>
You need to make the border-radius to a value greater than the border-width until you start to see a curve. It's not a set formula to set the border-radius of +1px greater than border-width. However, it's going to be a positive value, definitely. You need to experiment in the different browsers where you need this until you see the smallest possible border-radius value that works good enough for you in most browsers. (Some browsers may not support this.) For instance, in Google Chrome, I set a border-width to 10px, but had to set the border-radius to 13px before I started to see a semblance of an inner border curve, while 15px worked even better.
The best and fastest way is to do this
.curve {
width : 300px;
height: 100px;
border: 4px solid black;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
<div class='curve'></div>
If you can't add an extra div you can accomplish this with a background images in each corner.
#nice-corners {
border: 5px solid green;
border-radius: 5px;
background-image: url(top-left.svg), url(top-right.svg), url(bottom-left.svg), url(bottom-right.svg);
background-position: left top, right top, left bottom, right bottom;
background-repeat: no-repeat;
background-size: 16px
}