This question already has answers here:
How to make round corners to both inside of a box and its border?
(12 answers)
Closed 10 months ago.
I am trying to make this border
black border: 2px
white border: 1 px with border radius 4 px
Issue - I have tried using pseudo elements but not able to fill corners, its looking like this image below
what i have achieved with pseudo elements
Can i have the css to get this desired border?
Might be wrong, but I think the the black one is not a border indeed; just a div:
body {
background-color: red;
}
#black-border {
background-color: black;
width: 250px;
height: 150px;
padding: 10px 15px;
}
#white-border {
border: 8px solid white;
background-color: white;
border-radius: 15px;
height: 132px;
}
#inner-red {
background-color: red;
width: 100%;
height: 100%;
border-radius: 5px;
}
<div id="black-border">
<div id="white-border">
<div id="inner-red"></div>
</div>
</div>
Related
div {
margin: 0px;
padding: 0px;
}
#a {
position: fixed;
border: 4px solid black;
background-color:aqua;
}
#b {
width: 40px;
height: 40px;
background-color: grey;
}
<div id=a>
<div id=b></div>
</div>
https://www.hualigs.cn/image/60c949e478467.jpg
change a's border to "5px solid black"
https://www.hualigs.cn/image/60c949e425294.jpg
change a's border to "6px solid black"
https://www.hualigs.cn/image/60c949e426a74.jpg
change a's border to "7px solid black"
https://www.hualigs.cn/image/60c949e47c2e2.jpg
What!!! Why!!! Who can explain？ the broswer is chrome stable version.
I believe this is simply a browser rendering issue between the border and the div (I only see this issue on chrome, its not there in firefox). But you can get rid of that issue by adding this outline: 1px solid black; to #b in CSS.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I would need to get rid of the space below the two span tags and don't understand what causes them to be there.
HTML
<div>
<span></span><span></span>
</div>
CSS
div {
border: 1px solid gray;
display: inline-block;
}
span {
width: 13px;
height: 25px;
display: inline-block;
}
span:not(:last-child) {
border-right: 1px solid gray;
}
Screenshot:
https://jsfiddle.net/wjy5hxnu/
You can check the updated jsfiddle here.
div {
font-size: 0px;
}
Adding font-size: 0 to div will solve the problem and if you have to use any text inside span you can add font-size directly in the span.
div {
border: 1px solid gray;
display: inline-block;
line-height: 11px;
}
Line height will lower the div to meet the line.
I'm on Chrome (38.0.2125.101) and have something that looks like this:
The css is:
.if-container{
border: 1px solid black;
border-radius: 12px;
width: 400px;
}
.social-row{
background-color: yellow;
padding: 5px 20px 10px 10px;
}
How would I make the css of the embedded element be clipped to the container (or fix it)?
The .social-row <div> is overflowing outside of its parent container. Simply add this to your stylesheet:
.if-container {
overflow: hidden;
}
Ok, so for the sake of argument i have a box with a grey left and right border with an 8 pixel border bottom with a different colour.
The way borders display is showing the bottom border inside the left and right border. Ive done some research but i cannot find a way that is possible for the bottom border to display under the side borders as apposed to inside them. Sorry if i have not explained this too well please feel free to ask if you need any more information. Please follow the link below to a quick fiddle i have created.
<div class="bg">
<div class="box">
Box
</div>
</div>
.bg {
background-color: #fff;
width: 72%;
float: left;
height: 100%;
padding: 100px;
}
.box {
background-color: #fff;
height: 200px;
width: 200px;
float: left;
margin-left: 100px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 8px solid black;
}
http://jsfiddle.net/L06s4k50/
Thanks in advance people.
I think the best way of going about this is to forgo the border-bottom completely, and instead use a box-shadow property:
.box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-shadow: 0px 8px black;
}
I'm having a 'blonde moment' here - I'm sure this is easy but I can't seem to figure it out.
I have a grid of DIVs (10 rows which are CLEAR:BOTH - each with 10 FLOAT:LEFT DIVs of a fixed size).
What I want to do is assign a border to a group of these and this works (with the non-bordered sides/cells having a transparent border to keep everything aligned) BUT the way individual borders work, the 'corners' leave an ugly effect.
See this for an example
Am I missing an obvious trick to just make that a solid box rather than the 'dotted line' effect the corners are creating??
To clarify my CSS - the rows have this class
.row {
clear: both;
}
and the cells have this class
.cell {
float: left;
border: 5px solid transparent;
}
as well as between 0 and 4 classes like this one
.top { // repeated for bottom, left and right ofc.
border-top: 5px solid black;
}
Compare this:
div {
border: 3px solid white;
border-right: 3px solid black;
}
To this:
div {
border: none;
border-right: 3px solid black;
}
EDIT
The accepted solution was to make the padding take the place of the border, which would make the borders squared off. See:
http://jsfiddle.net/kCd7s/2/
If you put a border on the entire square, this is how border behaves. If you want to avoid this you should give the boxes with a black border dimensions on the sides not having a border equal to the width of the border, so add border: none first, then add dimensions, like if normal height is 20 and border is 5, and you want a border on the right, you would set: height: 30; width: 25; border-right: 5px solid;
Or try this way:
.top::before,
.bottom::before,
.left::after,
.right::after {
content: ".";
width: 100%;
height: 100%;
background: black;
display: block;
font-size: 0;
position: absolute;
}
.top::before {
height: 5px;
}
.bottom::before {
height: 5px;
top: 35px;
}
.left::after {
width: 5px;
}
.right::after {
width: 5px;
left: 35px;
}