I'm applying a 2px bottom border to a text field with a 4px corner radius on the container. Since the radius is larger than the border, it causes the border to curl around the edge. I want the border to stay flat along the bottom edge.
[DON'T want this: border wrapping border radius] https://imgur.com/JEfIkDE
[DO want this: bottom border remains straight]
https://imgur.com/xkuQGME
I haven't found a way to fix this within the CSS. Will I have to place another div inside the container to make this work? Basically a 2px high box at the bottom of the container? If so, I would appreciate any help on how that would be structured.
.textfield {
border-bottom: 2px solid #1A1446;
border-radius: 4px;
}
Use a gradient at the bottom:
.box {
width:200px;
height:100px;
border-bottom:5px solid transparent; /*keep it transparent*/
background:
linear-gradient(#1A1446,#1A1446) bottom/100% 5px border-box no-repeat,
yellow;
border-radius: 10px;
}
<div class="box"></div>
If you simply want the visual you can omit the border
.box {
width:200px;
height:100px;
background:
linear-gradient(#1A1446,#1A1446) bottom/100% 5px no-repeat,
yellow;
border-radius: 10px;
}
<div class="box"></div>
Hi i've got a input range on html5 min 0 and max 100.
But i would like to color a part for example between 70 and 100.
I don't want to use bootstrap for this.
I don't know how to do that.
You can easily do this by using a linear-gradient as background for the track. All that we need to do is create a gradient which is colored only for the width that we need (30% for your case because you need it colored only between 70-100) and then position it with respect to the track's (the track is the bar of the range input) right side. Since the styling of range inputs is still in experimental phase we have to use browser prefixed selectors (to select the track of each browser) and then apply styles to it. We also have to do some additional corrections to address browser specific problems, I've marked these with inline comments in the code.
The below code is tested and found to be working fine in Edge, IE11 and latest versions of Chrome, Firefox and Opera (all on a Windows 10 machine).
Note: This will only color the part between 70-100 of the range input differently. This doesn't have the code to make the appearance of range input the same in all browsers. I've not done that because that is out of the scope of this question.
Also, as mentioned by ssc-hrep3 in his comment, this may not be good for production implementation because these things are still in experimental stage and we've to use browser specific selectors but if you want to apply custom styling to HTML5 range inputs then there is probably no other way.
input[type=range] {
-webkit-appearance: none;
border: 1px solid black; /* just for demo */
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
}
input[type=range]::-moz-range-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
}
input[type=range]::-ms-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
background-repeat: no-repeat; /* no repeat means background appears a little on the left due to width issue and hence the fix */
width: 100%; /* to fix width issue in Edge */
color: transparent; /* to avoid the intermediate stripe lines in < IE11 */
border: none; /* just do away with the track's border */
}
input[type=range]::-ms-fill-lower {
background: transparent; /* IE11 has default fill and that needs to be removed */
}
<input type="range" min="0" max="100" value="70" step="10" />
For the benefit of future readers: Just in case you need uniform styling across all major browsers then you could use the below snippet. It produces almost similar output in all of them.
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
height: 10px;
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-moz-range-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
height: 10px;
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
background-repeat: no-repeat; /* no repeat means background appears a little on the left due to width issue and hence the fix */
width: 100%; /* to fix width issue in Edge */
height: 10px;
color: transparent; /* to avoid the intermediate stripe lines in < IE11 */
border-color: transparent;
border-style: solid;
border-width: 10px 0px; /* dummy just to increase height, otherwise thumb gets hidden */
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-fill-lower {
background: transparent; /* IE11 has default fill and that needs to be removed */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 18px;
width: 18px;
margin-top: -4px;
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
input[type=range]::-moz-range-thumb {
height: 18px;
width: 18px;
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
input[type=range]::-ms-thumb {
height: 18px;
width: 18px;
margin-top: 0px; /* nullify default margin */
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
<input type="range" min="0" max="100" value="70" step="10" />
My main problem is how can I get the foreground bubble (in blue) to be slightly below and to the right of the background bubble under all conditions?
I've tried playing around with different ways of overlapping objects on top of each other... specifically using the following ways:
Playing around with negative margins
Absolute/Relative positioning and z-index
However, I'm not able to get one combination which works under "all conditions" and keeps the text bubble "whole." (see note below)
Specifically, the conditions I'm facing are:
Different Text Lengths --- The text which currently written in as "Some Title" is automatically generated and could very in size (i.e. number of characters) so the bubbles need to adjust to be a different number of lines (1-5).
Differing Browser Sizes --- I want the text bubbles to adjust in response to the size of the browser, but not the distance between them.
Also note:
I'm using the latest version of Twitter Bootstrap.
I use specific before/after psuedo elements on the text bubbles so their little tips are placed in what appears to be okay location aesthetically. These would often get screwed up when I tried the second method above to solve the problem.
Bonus points if you can make the tips on the text bubbles look better ;)
Here's my html:
<div>
<div id="head-names">
<h2>
Person A
</h2>
<h2>
Person B
</h2>
</div>
<div align="center">
<h2 class="text-bubble background-bubble">
<p>Some Title</p>
</h2>
<h2 class="text-bubble foreground-bubble">
<p>Some Title</p>
</h2>
</div>
</div>
And my css:
#head-names {
display:flex;
align-items: center;
justify-content: space-around;
flex-wrap:wrap;
}
.text-bubble {
position:relative;
text-align : center;
border-radius:30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
max-width:650px;
padding: 10px 20px;
margin: 0 0 20px;
}
.text-bubble:before {
content:"";
position:absolute;
width: 0;
height:0;
border-style:solid;
}
.text-bubble:after {
content:"";
position:absolute;
border-style:solid;
display:block;
width: 0;
}
.foreground-bubble {
background-color: #ADD8E6;
border: 6px solid #666;
left:2%;
}
.foreground-bubble:before {
bottom:100%;
left:13%;
border-color: transparent transparent #666 #666;
border-width: 30px 30px 30px 30px;
}
.foreground-bubble:after {
bottom:100%;
left:15%;
border-color: transparent transparent #ADD8E6 #ADD8E6;
border-width: 18px 18px 18px 18px;
}
.background-bubble {
background-color: #fff;
border: 6px solid #666;
left:-2%;
color:transparent;
margin-bottom:-17%;
}
.background-bubble:before {
bottom:100%;
left:80%;
border-color: transparent #666 #666 transparent;
border-width: 30px 30px 30px 30px;
}
.background-bubble:after {
bottom:100%;
left:82.5%;
border-color: transparent #fff #fff transparent;
border-width: 18px 18px 18px 18px;
My code can be found here: http://jsfiddle.net/aZ6bE/
Link to some wireframes/sample images of how I'd ideally like it to scale: http://ge.tt/2puJ7Hh1/v/0?c
For the positioning I removed the .background-bubble margin-bottom:-17% and instead added top:-100px to .foreground-bubble since its position:relative.
I also gave the wrapping div a new class "bubbles" and added margin-top:50px to move it a bit further down so the tips don't collide with the text.
According the tips of the bubbles I changed:
the size (border-width) of the bigger triangle
percentage -> pixels
(background-bubble) left -> right
Here's the JSFiddle
I would also suggest you combine some of the CSS into new classes to reduce the redundancy.
e.g the border-width and bottom:100% of the tips.
I've got an aissue with 2 divs - both rendered as blocks both have margins of 15px (top div has bottom margin, bottom has top), therefore I expect the gap between to be 30px rather than 15px, is this a correct assumption or am I going mad!?
Cheers
Paul
The CSS box model defines the behavior for collapsing margins, and it is expected behavior among all browsers.
You might also find my answer to this related question to be of use.
Both margins will have 15px, and not sum them. If you want to add them use padding instead.
have had the same issue and couldn't use padding as a fix.
I have managed to fix this with this little hack:
.btn {
/* hack for a 2px margin */
border-top: 2px #fff solid !important;
/* this is important if you have a background-color
and don't want to see it underneath the transparent border*/
background-clip: padding-box;
}
Please launch this snippet for demo:
div {
margin: 10px;
background: rgb(48, 158, 140);
padding: 5px 15px;
font-weight: bold;
color: #fff;
}
.fake-margin {
border-top: 10px solid transparent;
background-clip: padding-box;
}
<div>Margin applied is 10px on each sides</div>
<div>the first two have only 10px between them</div>
<div class="fake-margin">the last two have 10 + 10px</div>
<div class="fake-margin">= 20 px</div>
Correct - but if it's not working out you could try 'padding' instead of 'margin' - that will probably have the desired effect.
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
}