Applying border-radius property on a div with a border only applies it to the top corners. Why is that?
Example:
https://jsfiddle.net/07tqbo56/1/
.asd {
margin-top: 35px;
width: 123px;
border-top-style: solid;
border-top-color: #1163b9;
border-top-width: 70px;
border-radius: 70px;
}
<div class="asd"></div>
This is how it looks like on Firefox 72, Ubuntu 19.
Not only in FireFox, it will look like that in all browsers,
Are you trying to do like this?
Just deleted the "Top" in border-style, -color and -width.
"Top" will do the changes only on the top of the design.
.asd {
margin: 35px;
width: 123px;
border-style: solid;
border-color: #1163b9;
border-width: 70px;
border-radius: 70px;
}
<div class="asd"></div>
I hope this would have solved your problem.
This is happening because your other border properties are only being applied to the top border, for example, border-top-style needs to be just border-style.
When only one border is solid, some browsers apply border-radius to just that border, while others still apply it to all borders.
.asd {
margin-top: 35px;
width: 123px;
border-style: solid;
border-color: #1163b9;
border-width: 70px;
border-radius: 70px;
}
<div class="asd"></div>
Define CSS like this
.asd {
margin-top: 35px;
width: 123px;
border: 70px solid #1163b9;
border-radius: 70px
}
<div class="asd"></div>
Related
This question already has answers here:
Border-radius in percentage (%) and pixels (px) or em
(3 answers)
Closed 2 years ago.
I want to round left and right side of the button like below
Notice that its straight line from top and bottom and only rounded from both sides.
button{
background: transparent;
border: 2px solid black;
font-size: 25px;
border-radius: 50%;
width: 200px;
padding: 5px;
}
<button>View All</button>
I have tried to use border-radius:50% but it made the whole button rounded.
Try like this.
button{
background: transparent;
border: 2px solid black;
font-size: 25px;
border-radius: 999px;
width: 200px;
padding: 5px;
}
<button>View All</button>
You can define a different border radius for the left/right side's of the div.
Try:
button{
background: transparent;
border: 2px solid black;
font-size: 25px;
border-radius: 10%/50%;
width: 200px;
padding: 5px;
}
<button>View All</button>
And experiment with variations of border-radius: 10%/50% like border-radius: 20%/40%...
You can specify each of the four corners radius with two percentages, ie: top-left, bottom-left, top-right & bottom-right. One for each corners horizontal and vertical semi-major and semi-minor axes of the ellipse.
button{
background: transparent;
border: 2px solid black;
font-size: 25px;
border-top-left-radius: 17.5% 50%;
border-bottom-left-radius: 17.5% 50%;
border-top-right-radius: 17.5% 50%;
border-bottom-right-radius: 17.5% 50%;
padding: 10px 25px;
}
<button>View All</button>
See the following Mozilla article for further explanation: MDN: border-radius
The title says it all, I've just discovered that IE (9 - 11) automatically applies about 50% opacity to any element's border with border-style: dotted.
The weirdest thing is, it only happens on dotted in particular, solid and dashed are fine.
You can test it yourself: http://jsfiddle.net/ptv74f4q/1/
Any ideas?
This appears to be due to IE anti-aliasing the dotted border. If you make the border-width bigger than 1px (say 5px) the border will appear white again.
One way to get around this would be to overlay some pseudo elements with the same dotted border on top to counteract the opacity:
div {
width: 200px;
height: 200px;
background: #000;
}
span {
transform: rotate(0deg);
display: inline-block;
width: 180px;
height: 85px;
line-height: 85px;
text-align: center;
margin: 8px 8px 0 8px;
border: #fff 1px solid;
color: #fff;
position: relative;
}
span.dotted {
border-style: dotted;
}
span.dotted::before, span.dotted::after {
border: #fff 1px dotted;
content: "";
height: 100%;
left: -1px;
position: absolute;
top: -1px;
width: 100%;
}
<div>
<span>I'm with normal border</span>
<span class="dotted">I'm with dotted border</span>
</div>
JS Fiddle: http://jsfiddle.net/oyrbLyjc/1/
Alternative method
Alternatively you could try using border-image. There are online tools (e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator) that would be able to help you generate a similar border using this method.
this is my first post here. I don't know how to explain my problem because I don't really know what is causing my CSS code to break. It would be easier to show you in a photo.
So I have a div tag and input and div child elements inslide. One of the div is static 32px x 32px and I am calculating its width with calc(100% - 32px), but when scaling some pixels aren't filled with the input.
Here's a photo of the problem: http://imgur.com/TkRFLde
This occurs when the zoom is not divisible by 100. For example it breaks on 110%, 150% and 175%. But it is right when the zoom is 100%, 200%, 300%...
Heres my code:
<div class="search">
<input type="text" value="Search" class="search-text" />
<div class="search-icon" ></div>
</div>
CSS:
.search {
height: 32px;
width: 250px;
}
.search-text{
float:left;
width: calc(100% - 55px) !important;
display: inline-block !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin: 0;width: 196px;
}
.search-icon{
display: inline-block !important;
background-color: #ACB6BE;
height: 30px;
width: 31px;
float:right;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
border: 1px solid #acb6be;
}
input[type=text] {
border-radius: 5px;
border: 1px solid #acb6be;
min-width: 180px;
color: #acb6be;
padding: 0 10px;
height: 30px;
background-color: #fff;
font-weight: 600;
}
Or jsfiddle: http://jsfiddle.net/39VDR/1/
The problem happens because when you zoom, your values will not be integer anymore. This means that rounding will take place and the outer container (.search) will be 1px larger than you would expect.
You can remove the float:right on the .search-icon and it will work ok.
You can see it here:
http://jsfiddle.net/39VDR/4/
.search-icon{
display: inline-block;
background-color: #ACB6BE;
height: 30px;
width: 31px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
border: 1px solid #acb6be;
font-size:12px;
vertical-align: top;
}
Still, as mentioned, you can remove the !important if you just add more specificity to your selectors.
http://jsfiddle.net/XjsWZ/
I'm trying to get the white box itself to have rounded corners in addition to its transparent gray border using CSS3. Is this possible?
html:
<div class="outer"><div class="inner"></div></div>
css:
.outer{
width: 300px;
height: 300px;
border: solid 10px;
border-radius: 5px;
border-color: rgba(0, 0, 0, 0.5);
}
.inner{
border-radius 5px;
}
Bonus question:
What's with those black squares in the corners on Chrome?
EDIT: I found a discussion of the black squares: Weird border opacity behavior in Webkit?
http://jsfiddle.net/XjsWZ/3/ maybe?
** edit **
I prefer JamWaffles':
.outer{
width: 290px;
height: 290px;
border: solid 10px;
border-radius: 15px;
border-color: rgba(0, 0, 0, 0.5);
background-clip:padding-box;
background-color:white;
padding: 5px;
}
Or if you want different looking corners there's a variant of Jedidiah's:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 10px; /*if you reduce this below 9 you will get black squares in the corners, as of Chrome 14.0.835.163 m*/
}
.inner{
border-radius: 5px;
background-color: white;
height: 100%;
}
JamWaffles answer is cleaner but if you did want to achieve this with the nested div tags and a translucent border you could set a background colour on the outer div to match the border colour, you would also need to set background-clip: padding-box; so that the border and background do not overlap.
Example:
http://jsfiddle.net/XjsWZ/7/
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display:block;
width: 100%;
height: 100%;
}
html:
<div class="outer"><div class="inner"></div></div>
This will change the look of the box a bit, but if the border radius is greater than the width of the border, you'll get inner rounded corners too.
Example here. I've removed the inner div as it's not needed for the example, as I have made the assumption you're nesting only to achieve the rounded effect.
In relation to the black squares in the corners, I don't get any at all with Chromium 12. You could try using a normal hex colour instead of an RGBA one. For your current colour, it's #808080, although I do appreciate the need for translucency; this is for a Facebox-style popup?
http://jsfiddle.net/XjsWZ/10/
It seems like this would be a good solution although it technically doesn't use a border, it maintains the correct alpha value while getting rid of the black squares in webkit:
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display: block;
width: 280px;
height: 280px;
position: relative;
top: 10px;
left: 10px;
}
html:
<div class="outer"><div class="inner"></div></div>
I have a div with different colors for both the border-bottom and border-right properties.
So they are separated via a line leaving the box in a 45 degree angle.
How can I make the bottom-border shorter so that the right border goes all the way to the bottom of the element which would yield a 90 degree angle separator-line?
You can do this with box-shadow.
Demo:
Output:
CSS:
#borders {
border-bottom: 20px solid black;
box-shadow: 20px 0 0 0 red;
height: 150px;
margin: 30px;
width: 150px;
}
HTML:
<div id="borders"></div>
I solved this issue using border-width. You simply reduce the width of the border at the edges you don't want to see.
If we don't want the border on the upper edge, we can put border-width to 0.
border-width: 0px 5px 5px 5px;
border-color:#ddd #000 #000 #000;
Sad fact: Border corners are mitered. Always. (It's only visible if using different colors.)
In order to simulate a butt joint, you can stack two divs to get a simulated result:
div {
position: absolute;
left: 0;
top: 0;
height: 100px;
width: 100px;
}
<div style="border-left: 2px solid #ff0000; border-bottom: 2px solid #ff0000;">
</div>
<div style="border-right: 2px solid #00ff00; border-top: 2px solid #00ff00;">
</div>
Stack more or control the top and bottom differently for better control over the appearance of the joint.
For the top border and the bottom border, you can use box-shadow:
.box {
border: 10px solid #ddd;
border-top: 0;
border-bottom: 0;
box-shadow: 0 10px 0 #D03FBE, 0px -10px 0 #D03FBE;
float: left;
width: 100px;
height: 100px;
}
<div class="box"></div>
What you are seeing is that borders on different sides will split diagonally around the corner:
.border {
border: 10px solid;
border-top-color: forestgreen;
border-right-color: gold;
border-bottom-color: steelblue;
border-left-color: firebrick;
width: 40px;
height: 40px;
}
<div class="border"></div>
This is a behavior many use to create CSS triangles
To overcome this I can find 2 solutions: borders on a wrapper element, or linear gradients:
Option 1: Wrapper elements
.wrapper {
border-bottom: 10px solid steelblue;
height: 40px;
width: 50px;
}
.border {
border-right:10px solid gold;
height: 40px;
width: 40px;
}
<div class="wrapper">
<div class="border"></div>
</div>
Note how the wrapper element has height of 5px more then the child. This is essential for the borders to align.
Option 2: Linear Gradients
.border {
border-bottom: 10px solid;
border-right: 10px solid;
border-image: linear-gradient(to top, steelblue, steelblue 10px, gold 5px, gold) 10;
height: 40px;
width: 40px;
}
<div class="border"></div>
If you're looking for square ends on your borders, you can set two of the borders to 0px and then run a dummy animation like so :
#keyframes widthSet {
to{
border-right-width: 10px; //or top and bottom, your choice
border-left-width: 10px;
}
}
with animation-fill-mode: forwards;
You can't.
For 90˚ angles you could just use colored divs.
You could get a similar effect for arbitrary angles by using skew transitions and absolute positioning, but it will be hard (if not impossible) to get it to look the same in older browsers (IE8 and lower will particular be a problem).