This question already has answers here:
CSS Property Border-Color Not Working
(6 answers)
Closed last year.
I'm trying to put a border around a header, nothing seems to be working... apologies, I'm pretty new to all of this, so is there another way?
header {
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: 852px;
height: 179px;
border: 10px #FFFFFF;
border-radius: 6px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Vincent_van_Gogh_-_Self-portrait_with_grey_felt_hat_-_Google_Art_Project.jpg/250px-Vincent_van_Gogh_-_Self-portrait_with_grey_felt_hat_-_Google_Art_Project.jpg");
}
<header>
<img src="https://www.brandbucket.com/sites/default/files/logo_uploads/284255/large_titletext.png" alt="ninenonzeg">
</header>
Change the border color then try to do that. I think that your background color and border color are similar. And also give the style of the border.
border: 10px solid #FFFFFF;
or
border-style:solid;
Add solid attribute to border in css.
do
border: 10px solid #FFFFFF;
make sure you need a #FFF (white) border
Related
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 3 years ago.
I can create a tirangle using CSS trick with border, e.g:
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
<div class="arrow-down"></div>
(from https://css-tricks.com/snippets/css/css-triangle/)
But, as you can see, it always has an even side length. It happens because it consists of two border sides - left and right. If I make one side shorter than other - it doesn't solve the problem, I only get not a equilateral triangle. If I have a triangle with odd side in design picture, I can use this method.
I think, transform could help, but I'm not sure, it's a good and strict enough method.
Is there any other solutions?
I would stretch the triangle using transform by increasing the Y-scale
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
transform: scaleY(1.66);
}
<div class="arrow-down"></div>
This question already has answers here:
CSS Circle with border
(5 answers)
Closed 5 years ago.
The following code below adds a radio button with a number inside a border, but the border should be circle, how can I make it circle?
Note that the position of the text is important to not be affected by the css.
p {
outline-style: solid;
padding : 16px;
position: absolute;
}
<p><input type="radio">1</p>
Use the border and border-radius properties instead of outline-style:
p {
border: 3px solid #000;
border-radius: 50%;
height: 45px;
line-height: 45px;
position: absolute;
text-align: center;
width: 45px;
}
<p><input type="radio">1</p>
As you can see, you may also need to change the height and width elements to ensure that the element is a perfect circle (well, square).
try to set the border and then use order-radius.
p {
border: solid 2px black;
padding : 16px;
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
}
<p><input type="radio">1</p>
This question already has answers here:
CSS Double Border with outer border thicker than inner border
(5 answers)
Closed 6 years ago.
I want to make a double border on the left side only with thick outline (outer) and thin outline (inner). How can I make it?
I think this is what you are looking for..
.border1{
width:100px;
height:100px;
border-left: 10px solid #ccc;
}
.border2{
width: 100px;
height: 100px;
display: block;
margin-left: 15px;
border-left: 3px solid #ccc;
}
<div class="border1">
<div class="border2"></div>
</div>
Check it and let me know if you want any thing else..
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 6 years ago.
I'm trying to "cut" a div diagonally after some space. It's very difficult to explain. It should look like this:
As you cann see, there is a blue parent div in the back with a white child div inside. The white div will be the same width as the parent div, but it will be "cutted" diagonally after some pixels (e.g. after 100px). I never did something like this, but I thought it could maybe done in CSS3 using transition or rotation or something like this (I don't know, I'm not familiar with CSS3).
I searched for diagonal divs but I only got results like this. Unfortunately I know nothing to do with it. Is this even possible? Can you please give me some hints?
Use border colors to display a diagonally cut div.
Combine it with ::after to use only one div.
.background {
background-color: #5555AA;
padding-top: 15px;
}
.content {
position: relative;
background-color: white;
height: 30px;
line-height: 30px;
padding: 0 100px 0 200px;
display:inline-block;
}
.content::after {
position: absolute;
right: -50px;
content: "";
border-bottom: 25px solid white;
border-left: 25px solid white;
border-top: 25px solid transparent;
border-right: 25px solid transparent;
}
<div class="background">
<div class="content">KONTAKT</div>
</div>
This question already has answers here:
How can I make a div with irregular shapes with css3 and html5?
(3 answers)
Closed 1 year ago.
I want to know if it's possible to create this type of div shape with CSS3.
I'm aware you can do things such as this using border's, but is there anyway to get the borders like in the image (spanning he entire top and bottom of the div) - and for bonus points, for it to do it responsively (% widths?)
.cornered {
width: 160px;
height: 0px;
border-bottom: 40px solid red;
border-right: 40px solid white;
}
Any links, fiddles, advice would be appreciated.
As mentioned in my comment, I have created a skewed triangle (if you remove the padding CSS you will see), and then added padding so that you can't see the tip of the triangle
.cornered {
width: 160px;
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 280px solid blue;
padding:60px;
}
Fiddle
You could do this
css
.irregular-shape {
border-left: 1500px solid black;
padding: 50px;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
}
markup
<div class="irregular-shape"></div>