CSS BORDER COLOR

Tuesday, 3 June 2014

CSS BORDER COLOR

--------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
----------------------------------------------------------------------------------------------------------

.test{
border: 20px solid;
border-top-color:#ff0000;
border-right-color:#00ff00;
border-bottom-color:#0000ff;
border-left-color:#FFFF00;
width:100px;
height: 100px;
background: #272822;
}

#outer-wrapper {
color: #000000;
border-top-color:#ff0000;
border-right-color:#00ff00;
border-bottom-color:#0000ff;
border-left-color:#FFFF00;
width:1000px;
height:1000px;
background:#272822;
font: normal normal 11px Verdana,Geneva,sans-serif;
}

--------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
----------------------------------------------------------------------------------------------------------

<html>
<head>
<title>Textarea Tricks</title>
<style>
textarea { width: 400px; padding: 10px; }
#example-one {
background:url(http://css-tricks.com/examples/TextareaTricks/images/benice.png) 50% 50% no-repeat;
border:1px solid #888888;
}
#example-two {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcCuR6q9-11iuF0bnE-bfiy-V3V0FpS6Z2wMf4Z8p_Hmv1AT83TJz8YY-TcFpyi2camx3QHoMa5-bzIF6Og_WtE6o_F8_gj6Dq90H9LSQYRk0dn3KJ4iWtG5UPJhn8mCJDwB_NaPeCgpll/s1600/FBGadgets.jpg) 50% 50% no-repeat;
border: 20px solid;
border-top-color:Red;
border-right-color:Yellow;
border-bottom-color:Blue;
border-left-color:GREEN;
width:100px;
height: 100px;
color:Red
}
</style>
</head>

<body>
<div id="page-wrap">
<textarea id="example-one" cols="30" rows="5">
</textarea>
<textarea id="example-two" cols="30" rows="5">
TEXT AREA WRITTING
</textarea>
</div>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------------
Read More:
CSS: Double Border With Different Color:
http://stackoverflow.com/questions/19463904/css-double-border-with-different-color
--------------------------------------------------------------------------------------------------------------------------

NOTE: I'm giving two borders to the white element: the outer border is white, and the inner border is greyish. Together, they create a dynamic look so that it feels like an inset element, and the white element is pillow embossed. So thing is a bit:

div.white{
   border: 2px solid white;
   border: 1px solid grey;
}

But you know it's a double declaration, and is invalid. So how can I manage such thing in CSS?

And if I put border-style: double then you know I can't pass two different color for the singe double border.

div.white{
       border: double white grey;
}

-----------------------------------------------------------------------------------------------------------------------

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #ccc;
  border: 4px solid #fff;
  padding: 2em;
  width: 16em;
  height: 16em;
  position: relative;
  margin: 0 auto;
}
.double-border:before {
  background: none;
  border: 4px solid #fff;
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  pointer-events: none;
}

<div class="double-border">
  <!-- Content -->
</div>

-----------------------------------------------------------------------------------------------------------------------

If you want borders that are consecutive to each other (no space between them), you can use multiplebox-shadow declarations (separated by commas) to do so:

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #ccc;
  border: 4px solid #fff;
  box-shadow:
    inset 0 0 0 4px #eee,
    inset 0 0 0 8px #ddd,
    inset 0 0 0 12px #ccc,
    inset 0 0 0 16px #bbb,
    inset 0 0 0 20px #aaa,
    inset 0 0 0 20px #999,
    inset 0 0 0 20px #888;
  /* And so on and so forth, if you want border-ception */
  margin: 0 auto;
  padding: 3em;
  width: 16em;
  height: 16em;
  position: relative;
}

<div class="double-border">
  <!-- Content -->
</div>

--------------------------------------------------------------------------------------------------------------------------
COLUMN COLOR

--------------------------------------------------------------------------------------------------------------------------
CODE:
--------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html">

<html>
<head>
<title>FbGadgets</title>
<style type="text/css">
body {
text-align: center;
}
#wrapper {
display: block;
border: 2px #a2a2a2 solid;
width: 90%;
margin: 0px auto;
}
#header {
border: 2px #a2a2a2 solid;
}
#content {
width: 75%;
border: 2px #a2a2a2 solid;
float: left;
}
#sidebar {
width: 23%;
border: 2px #a2a2a2 solid;
float: right;
}
#delimiter {
clear: both;
}
#footer {
border: 2px #a2a2a2 solid;
}
.title {
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}

.color_col_1 {
background:#EC3233;
height:5px;
}
.color_col_2 {
background:#1EB2B2;
height:5px;
}
.entry-colors .color_col_1, .entry-colors .color_col_2, .entry-colors .color_col_3 {
float:left;
height:5px;
width:33.33%;
}
</style>

</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">FbGadgets</a></h1>
<p>Just another WordPress site</p>
</div>
<div class="entry-colors">
<div class="color_col_1"/>
<div class="color_col_2"/>
<div class="color_col_3"/>
</div>
</div>
</div>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<h1>Hello world!</h1>
<h4>Posted on December 14th, 2015</h4>
<p><p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
</p>
<hr> </div>
<div id="sidebar">
<h2 >Categories</h2>
<ul >
<li class="cat-item cat-item-1"><a href="http://localhost/responsivewebsite/index.php/category/uncategorised/" >Uncategorised</a> (1)
</li>
</ul>
<h2 >Archives</h2>
<ul >
<li><a href='http://localhost/responsivewebsite/index.php/2015/12/'>December 2015</a></li>
</ul>
</div></div>
<div id="delimiter">
</div>
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>

</body>
</html>