Creating different border colors?

HTML-CSS
1

I am trying to make my top left corner red, top right corner yellow, bottom left corner blue and bottom right corner green. I have been at this for 30 minutes and no luck lol. Here is my code and a snip of what it currently looks like

image
image845×611 1.52 KB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A template programmed with html and css that can be used potentially by Andrew Turner when blogging for business and/or personal reasons" />
<link rel="stylesheet" href="TurnerBlog.css" />
<!-- get a favicon -->
<link rel="icon" type="image/x-icon" href=/>
<title> TurnerBlogTemplate </title>
</head>
<body>
<fieldset id="container">
<div id="red">
<fieldset id="red">
</fieldset>
</div>
<div id="yellow">
<fieldset id="yellow">
</fieldset>
</div>
<div id="blue"></div>
<div id="green">
<fieldset id="green">
</fieldset>
</div>
</fieldset>
</body>
</html>

body{
	background-color: black;
}
#container{
	border-width: 18px;
  border-image: linear-gradient(to right, rgb(0, 0, 230) 50%, rgb(0, 128, 0) 50%);
  border-image-slice: 1;
	border-left-color: ;
	border-right-color: ;
	border-bottom-color: ;
	color: white;
	width: 780px;
	height: 550px;
	margin-left: 230px;
}
#red{
	border-bottom-color: red;
	border-right-color: red;
	border-left-color: black;
	border-top-color: black;
	height: 260px;
	width: 370px;
	float: left;
	position: relative;
	right: 10px;
	bottom: 5px;
	z-index: -1;
}
#yellow{d;
	border-bottom-color: yellow;
	border-right-color: black;
	border-left-color: black;
	border-top-color: black;
	z-index: -2;
	height: 260px;
	width: 393px;
	float: right;
	position: relative;
	bottom: 5px;
	left: 10px;
}
#green{
	border-left-color: green;
	border-bottom-color: black;
	border-right-color: black;
	border-top-color: black;
	z-index: -3;
	float: bottom;
	position: relative;
	top: 3px;
    left: 188px;
	height: 283px;
	width: 400px;
}
2

I haven’t got a hugely in depth answer, but using flexbox or grid is probably a good start.

If you haven’t come across these in the RWD section of the course, try searching for a tutorial.

Sorry if that’s not the best help, but I’m still fairly new. Hopefully that puts you on the right path though.

Edit: Using flexbox - you can make a container, put items in the container and position them. You can then use CSS to style the items i.e. the border color.

NB. I’m from the UK and still don’t like writing color instead of colour.

1 Like
3

Hey @aidanhammond382
Try using pseudo elements like the ::before and ::after I think it will do the trick or you can use div or span elements then you can use absolute positioning on then and why are you using fieldsets for your containers maybe you should consider using just simple divs it will just do the trick

Hope it helps :smile:

1 Like
4

I have used div elements, so far so good, I will post further if I run into anything, thank you for the solution!

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.