Input text field with only bottom border
Use outline:0 and then set border-bottom input { outline: 0; border-width: 0 0 2px; border-color: blue } input:focus { border-color: green; outline: 1px dotted #000 } <input placeholder=”Text” type=”text” />
border
Change border-bottom color using jQuery?
$(“selector”).css(“border-bottom-color”, “#fff”); construct your jQuery object which provides callable methods first. In this case, say you got an #mydiv, then $(“#mydiv”) call the .css() method provided by jQuery to modify specified object’s css property values.
How to create multi-color border with CSS?
You can do it without pseudo-elements, just with border-image: linear-gradient .fancy-border { width: 150px; height: 150px; text-align:center; border-top: 5px solid; border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5; } <div class=”fancy-border”> my content </div>
How do I show sprites in the border on C64?
Yes, you need assembler. It’s an interrupt timing trick. The VIC is able to show sprites in the border, but the frame is just hiding them, so the sprites can slide behind it. It’s connected to scan lines displayed by the VIC. For lower/upper borders it’s quite simple: Programm an interrupt, synced to start at … Read more
Strange border on IMG tag
It’s the default “special” border that appears when you use an img element with an a src attribute set to something that doesn’t exist (or no src at all). A common workaround is to set the src to a blank.gif file: <img class=”logo” src=”https://stackoverflow.com/questions/5743083/blank.gif” /> I have to point out that it (in this case) … Read more
How to move and resize a form without a border?
Some sample code that allow moving and resizing the form: public partial class Form1 : Form { public Form1() { InitializeComponent(); this.FormBorderStyle = FormBorderStyle.None; this.DoubleBuffered = true; this.SetStyle(ControlStyles.ResizeRedraw, true); } private const int cGrip = 16; // Grip size private const int cCaption = 32; // Caption bar height; protected override void OnPaint(PaintEventArgs e) { … Read more
Border Gradient with Border Radius
2021: I recommend using the CSS mask method since the support is pretty good now You cannot use border-radius with gradient. Here is another idea where you can rely on multiple background and adjust the background-clip: .white-grad { background: linear-gradient(#ccc 0 0) padding-box, /*this is your grey background*/ linear-gradient(to right, #9c20aa, #fb3570) border-box; color: #313149; … Read more
Invert rounded corner in CSS?
In modern browsers, you can use mask-image: #aux-container { width: 100px; height: 100px; background: #f00; -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px); } <div id=”aux-container”></div> http://jsbin.com/eViJexO/1/ Additionally, take a look at http://www.html5rocks.com/en/tutorials/masking/adobe/, which describes how to achieve similar result using mask-box-image.
Table border color in CSS with border collapse
This is a defined behavior of border-collapse. Page 357 of the O’Reilly CSS Definitive Guide 3rd Edition says: if collapsing borders have the same style and width, but differ in color, then … from most to least preferred: cell, row, row group, column, column group, table. if … come from same type of element, such … Read more
css border-left 50% height
A sort-of similar but different approach to @Pekka’s: use the :after pseudo-selector, like so: .mybox { position: relative; padding: 10px 20px; background-color: #EEEEEE; } .mybox:after { content: ”; position: absolute; bottom: 0px; left: 25%; width: 50%; border-bottom: 1px solid #0000CC; } <div class=”mybox”> Le content de box. </div> …and a jsFiddle for good measure.