Set CSS Border Color to Text Color

Set CSS Border Color to text color

You actually get this behavior for free; it's mentioned in the spec:

If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.

So all you have to do is omit the color when using the border shorthand property:

.dotted-underline {
    border-bottom: dotted 1px;
}

Or only use the border-style and border-width properties, and not border-color:

.dotted-underline {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

Or, in browsers that support the new CSS3 keyword currentColor, specify that as the value for border-color (useful for overriding existing border-color declarations):

.dotted-underline {
    border-bottom-color: currentColor;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

The color that the border takes on will be the same as the text color by default.

Border color + font color in HTML?

You need to apply border on td

tr td { 
      background: #9a9a9a;
      border:1px solid #000000;
      font-size: 21px;
      color: #fff;
      font-weight: bold;
    }

border will apply from all 4 sides. you can change border sides with
border-top, border-bottom, border-left, border-right

How to change text color while hovering around border in CSS?

I'm assuming that .project-text is inside of .item. You can create a CSS selector to that styles the children based on hover state of the parent. See commented code below; I added a padding on .item to better show the result.

.item {

    border: solid 0px;

    border-spacing: 10px;

    background: rgba(164, 165, 219, 0.45);

    border-radius: 20px;

    padding: 2rem /* two times the font size of the body */

}

.item:hover {

    background: rgba(72, 74, 196, 0.45);

}

.project-text {

    color: rgb(43, 41, 41);

    font-size: 50px;

}

.item:hover .project-text { /* changed selector */

    color: white;

}

<div class="item">

  <p class="project-text">

    Hello

  </p>

</div>

CSS Font Border?

There's an experimental CSS property called text-stroke, supported on some browsers behind a -webkit prefix.

h1 {

    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;

}

<h1>Hello World</h1>

Why is the CSS border-color inheriting the color property?

Based on section 4.1 of the relevant Backgrounds and Borders Module spec, the initial border-color value is currentColor:

CSS Color Module - 4.4. currentColor color keyword

CSS1 and CSS2 defined the initial value of the border-color property to be the value of the color property but did not define a corresponding keyword. This omission was recognized by SVG, and thus SVG 1.0 introduced the currentColor value for the fill, stroke, stop-color, flood-color, and lighting-color properties.

CSS3 extends the color value to include the currentColor keyword to allow its use with all properties that accept a <color> value. This simplifies the definition of those properties in CSS3.

In other words, the value is treated as the following in your case:

border: 4px solid currentColor;

Therefore you could also use the currentColor value for something such as the background-color property. For instance:

div {
  color: red;
  width: 100px;
  height: 100px;
  border: 4px solid;
  background-color: currentColor;
}

<div></div>

How to change Text color in Div without changing border color

What worked for me is combining the border properties into 1 line using the shorthand syntax...

.signupsubmit {

    line-height: 32px;

    position: absolute;

    left: 36px;

    top: 527px;

    font-family: arial;

    font-size: 17px;

    font-weight: 600;

    width: 137px;

    height: 30px;

    border: 1px solid #00297A;

    border-radius: 4px;

    background-color: #FFB630;

    text-indent: 30px;

    color: white; <!-- NEW LINE OF CODE -->

}

<div class = "signupsubmit">Continue</div>

how can i change my border's color and label's color with same psuedo class

Move the container styles to #mainm and add the color: white; to :hover.

Make note of the other styles I changed to clean it up a bit. I added text-align: center; to the id and removed the height. Instead of a fixed height just use padding.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

/*  font-family: 'Open Sans', sans-serif;*/

body {
  background-color: #14213d;
  margin: 0;
}

.container li {
  list-style: none;
}

.container {
  width: 100%;
  height: 100%;
}

li#mainm {
  border: 2px solid #fca311;
  width: 400px;
  padding: 30px 0px;
  position: relative;
  left: 720px;
  top: 400px;
}

#mainm {
  font-family: 'Open Sans', sans-serif;
  color: #e63946;
  font-size: 25px;
  text-align: center;
}

#mainm:hover {
  transition: 2s;
  border-radius: 15px;
  border-color: #43aa8b;
  color: white;
  background-color: #43aa8b;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <ul>
      <li id="mainm">Site Hazırlanma Aşamasında</li>
    </ul>
  </div>

</body>

</html>

Can't change border color when input field is active

So this is a few things, your css isn't valid, you've written scss syntax. If you're aware of this and the question is meant to say "scss", then you need to add outline: none;. Also #black isn't a valid colour.

Example in scss:

input {
    margin-top: 20px;
    border-radius: 0px;
    background-color: #FFFFFF;
    border: 1px solid black;
    height: 33px;
    width: 200px;

    &:active, &:focus { // I think you said you wanted focus as well
      font-size: 13px;
      border: 2px solid red;
      outline: none; // add this
      background-color: #ffffff;
    }

    &:disabled {
      border: 1px solid black; // update this
      border-radius: 0px;
      background-color: #F9FAFB;
    }
}

In css:

input:active, input:focus { // I think you said you wanted focus as well
      font-size: 13px;
      border: 2px solid red;
      outline: none; // add this
      background-color: #ffffff;
    }

• You can't use the & in regular css.
• #Black isn't a css colour value.
• You need outline: none to override the browser's default focus behaviour.

---

Related Topics