Can I have different colored left and top borders in CSS with straight join?
.item::before was the right approach, but it needs a bit of work past a single border-left property. You'll need to make the pseudo element visible (display: block; content: "";), position the pseudo element on the left side of .item, and stretch it to line up with the top and bottom borders properly.
While this can be done manually, I highly recommend using CSS Variables (or variables in your preprocessor) since it makes updating the widths of borders less error-prone and painful.
.item { display: inline-block; padding: 0.2em 0.3em; background: #f8f8f8; color: #454545;
/* Set border widths with variables */ --top-border-width: 4px; --bottom-border-width: var(--top-border-width); --left-border-width: 16px; --right-border-width: var(--top-border-width);
/* Set border styles for each side */ border-top: var(--top-border-width) solid #e4e4e4; border-bottom: var(--bottom-border-width) solid #e4e4e4; border-right: var(--right-border-width) solid #e4e4e4;
/* Remove the left border and add blank space where the border should be placed */ border-left: 0; margin-left: var(--left-border-width);
/* Contain the ::before */ position: relative;}
.item::before { /* Give the pseudo element substance */ display: block; content: "";
/* Add a left border with a straight edge */ border-left: var(--left-border-width) solid #f84995;
/* Position pseudo element's border where the normal border would have been placed */ position: absolute; top: calc(0px - var(--top-border-width)); bottom: calc(0px - var(--bottom-border-width)); left: calc(0px - var(--left-border-width));}<h1 class="item">Gen.2</h1>Different borders on each side of a TextField
You can specify 4 values in -fx-border-color, and they will be the colors of the top, right, bottom and left border, respectively.
-fx-border-color: red green blue yellow;
See -fx-border-color in JavaFX CSS reference.
Half colored border on top and bottom using CSS
Use pseudo ::before and ::after on h1 tag along-with linear-gradient as background use height instead of border to get that styling,
header { text-align: center; background-color: #7f7f7f;}
h1{ color: #00a2e8; font-size: 40px; padding: 5px 0; display: inline-block; position:relative;}h1:before{ content:""; width:100%; height:3px; left:0; top:0; position:absolute; z-index:9; background:linear-gradient(to right, white 50%, brown 50%);}h1:after{ content:""; width:100%; height:3px; left:0; bottom:0; position:absolute; z-index:9; background:linear-gradient(to right, brown 50%, white 50%);}<header> <h1>HEADER</h1></header>how to create top left and bottom right border with different color?
Please refer the below example.
You can use position set toabsolute for the two red sections and they can be positioned with respect to the div with class box, which has its position set to relative.
.box { background-color: gray; height: 400px; width: 400px; position: relative;}
.top-left { position: absolute; top: 10px; left: 10px; border-left: 10px solid darkblue; border-top: 10px solid darkblue; height: 30px; width: 30px;}
.bottom-right { position: absolute; bottom: 10px; right: 10px; border-bottom: 10px solid red; border-right: 10px solid red; height: 30px; width: 30px;}<div class="box"> <div class="top-left"></div> <div class="bottom-right"></div></div>Different Border Colors in One Class *CSS*
What you are trying to accomplish could be accomplished automatically using Javascript, but if it is a static page you are working on it is probably easier to do it manually as long as you don't have too many of them to do.
.projectDetails.meetTeam {
border-bottom: .1em solid #{selected color};
}
.projectDetails.redesignTwitch {
border-bottom: .1em solid #{selected color};
}
I know Chrome has a color picker tool you could use to select a color from each image to use for that underline.
Basic code for changing css in Javascript if you want to use that:
document.getElementByClassName('projectDetails meetTeam').style.border-bottom = '.1em solid #{selected color};';
How can I set a css border on one side only?
#testdiv {
border-left: 1px solid;
}
See the MDN documentation on border.
Custom top border width with css
Your solution adds border-radius to all all corners top-left, top-right, bottom-left, bottom-right.
Instead of setting
border-radius: 4px;
simply go with specific corners for example:
border-bottom-left-radius: 50px;
would setup only bottom-left radius like here:
and reduce unwanted effect in your UI.
Border-bottom overrides border-left?
borders in css are diagonally intersect each other so you can not achieve that only by using borders, Please check this quastion for this...Can I have different colored left and top borders in CSS with straight join?
Border-top on input element is not straight
Try using box-shadow with no blur, you do have to add a margin though
input { background-position: left 10px top 25px; background-repeat: no-repeat; background-size: 10px auto; border: 1px solid #ccc; color: #414042; font-size: 25px; font-stretch: condensed; font-style: normal; font-weight: lighter; padding: 15px; text-indent: 20px; width: 50%; box-shadow: 0px -15px 0px 0px #414042; margin-top: 15px;}<input type="text" placeholder="NOME" required>Related Topics
Is There a CSS Selector for Element Without Any Class
Row Wrap in Flex-Box Not Wrapping in Safari
Custom CSS Being Overridden by Bootstrap CSS
Is There a Google Chrome-Only CSS Hack
How to Keep :Active CSS Style After Clicking an Element
CSS Width 100% or Max-Width in Pixels
Tcpdf Not Render All CSS Properties
How to Set Background Image in Submit Button
Evenly Distributed Height of Child Elements with CSS
CSS Selector for Not a Child of Element Type
How to Select All Elements Whose Id Starts and Ends with Specific Strings
CSS - Exact Same Height and Alignment of Button and Input Text Box
How to Create a CSS Rule for All Elements Except One Class
Sass/Compass - Convert Hex, Rgb, or Named Color to Rgba
How to Get a React Component's Size (Height/Width) Before Render
Differencebetween Pseudo-Classes and Pseudo-Elements
How to Use/Emulate Regex-Like Backreferences in Attribute Selectors