I have a problem in IE and Edge when I use border-style: dashed; and border-radius: .375rem; on the same element:
div {
padding: 5rem;
margin: 1rem;
border: 1px dashed gray;
border-radius: .375rem;
}
The following is what I get (those weird things in the corners).
For the reason unknown to me I cannot reproduce this in jsfiddle or anywhere outside my document. Would be greatful for any advice on what this can be at all cause I am out of ideas (I am talking about those weird things in the corners).
Related
I want to know the difference between border styles- ridge and groove. When i used them, i was not able to spot the difference between the two. I cannot upload the image since i have not reached level 10 to make it more clear. Here's the code:
border-style: groove ridge dashed groove;
It's border shadow position:
Ridge: from top left
Groove: from bottom right
div {
padding: 10px;
margin: 10px;
float: left;
background-color: white;
}
.wrap {
background-color: #ffdddd;
}
#ridge {
border-width: 5px;
border-style: ridge;
margin-right: 1px;
}
#groove {
border-width: 5px;
border-style: groove;
margin-left: 1px;
}
<div class="wrap">
<div id="ridge">ridge</div>
<div id="groove">groove</div>
</div>
The difference is defined in somewhat vague terms in the CSS 2.1 specification:
groove
The border looks as though it were carved into the canvas.
ridge
The opposite of 'groove': the border looks as though it were coming out of the canvas.
This allows various interpretations and implementations, and the visual effect is often not that clear. It tends to be clearer when the border is relatively wide. Typically browsers use two different colors to create the impression, the declared border color and a lighter color. This is meant to correspond to an idea of groove or ridge border when light is coming from the direction of the upper left corner. Example:
<style>
span { border: solid red 10px }
.groove { border-style: groove }
.ridge { border-style: ridge }
</style>
<span class=groove>groove</span>
<span class=ridge>ridge</span>
Here are some MDN docs on css border-style
According to this:
groove: Displays a border leading to a carved effect. It is the opposite of ridge.
Groove is a 3D effect that gives the impression that the border is carved into the canvas.
Ridge is a 3D effect that has the opposite effect of groove, in that the border appears to protrude from the canvas.
This link gives you a clear idea:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style
So I have a field that is supposed to have a black outline. Like this
Where the 237 is. But here's what I have
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
outline: 3px solid black;
}
For some reason when I select the field it gets smaller. And on initial load, there's kind of like an outline around it. A grayish one. You could call it a shadow Here's a demo. Ideas?
Use border instead of outline to remove the "shadow":
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
border: 3px solid black;
}
JSBin: http://jsbin.com/cuwurowu/2/edit
The “shadow” is the default border of the input element. To remove it, add
.r { border: none }
(but note that this affects the totals dimensions of the element, which may matter in pixel-exact layout).
The shrinking effect in Chrome (does not seem to happen in Firefox or IE) is apparently caused by a browser default style sheet that sets outline-offset: -2px on the element when it is focused. The outline-offset sets the distance between an outline and the outer edfes of the element, so a negative value shrinks the outline. To fix this, add
.r { outline-offset: 0 }
.myclass {
border: 6px dotted #2d2d2d;
width:200px;
height:200px;
border-radius:100% 100% 100% 100%;
}
When i'am trying to give full border radius to border: 6px dotted #2d2d2d; in browser it showing solid border not dotted above is my css code please help me.
This only happens in Firefox I think it's a bug - it's because of the radius - you might consider using an image in this case.
CSS border radius for dotted border
Instead of writing:
border: 6px dotted #2d2d2d;
try:
border-style: doted;
border-width: 6px;
border-color: #2d2d2d;
Thats what I use when I write CSS.
http://thc-cup.ucoz.com/forum/2-1-1
After you can see, the left has a radius at content background and border, but the left one does not! I managed to get it like the one in the left after adding to the div style: display:inline-block; but that messes the box and moves it under the left block.
Since this is a forum (my link) I can't edit html, but I can edit the CSS of the forum.
Here is the style of those blocks:
.postTdInfo { //Left block
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
.posttdMessage { //Right block
margin: 0px 0px 0px 0px;
padding: 25px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 25px;
I searched all the day for a solution but can't seem to find one.
Is there any way of changing CSS so that the block accepts border radius?
Edit: my first answer didn't solve the problem.
The problem is that you're working on a td element, which has the display property by default set to table. Either add display: block; to .posttdMessage, or, if this causes problems, add another <div> element directly inside the table cell and style that with rounded borders instead.
I have a div with rounded corners at the bottom and normal corners at the top. This div also has a border along the top. However this border seems to 'seep through' down to the rounded corners at the bottom. This issue is only present in Safari (I'm using 5.1.3) and not Chrome or Firefox.
The CSS related to this bug is:
.info {
float: left;
width: 272px;
height: 200px;
background: #222222;
border-top: 5px solid #6fcbe4;
-webkit-border-bottom-right-radius: 18px;
-webkit-border-bottom-left-radius: 18px;
-moz-border-radius-bottomright: 18px;
-moz-border-radius-bottomleft: 18px;
border-bottom-right-radius: 18px;
border-bottom-left-radius: 18px;
padding: 0 14px 0 14px;
}
And the html is:
<div class="info left">
<h3>new<span class="pink">server</span></h3>
</div>
And this results in the image seen below:
Where as you can see the bottom corners have a blue edge to them.
Does anyone know a work around to this or is it a mistake I'm making?
Thanks.
It's a bug, but you can prevent it by adding a bottom-border:
border-bottom: 1px solid #222;
I think this is a bug in Safari. I noticed a similar effect in a slightly order version of Chrome, which suggests this is a Webkit bug that Google has fixed but has not yet been implemented in Apple's version.
Have you tried defining the border for bottom, left, and right?
border-left: solid 0px none;
border-right: solid 0px none;
border-bottom: solid 0px none;