To expand the bottom border on hover, you can use transform:scaleX'(); (mdn reference) and transition it from 0 to 1 on the hover state. Here is an example of what the border hover effect can look like : The border and transition are set on a pseudo element to prevent transitioning the text and avoid …
You can achieve that using multiple linear gradients as a background image. div { width: 100px; height: 100px; background: linear-gradient(to right, black 4px, transparent 4px) 0 0, linear-gradient(to right, black 4px, transparent 4px) 0 100%, linear-gradient(to left, black 4px, transparent 4px) 100% 0, linear-gradient(to left, black 4px, transparent 4px) 100% 100%, linear-gradient(to bottom, black 4px, …
You can use “transparent” as a colour. In some versions of IE, that comes up as black, but I’ve not tested it out since the IE6 days. http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php
Unfortunately, that’s what borders do, they’re counted as part of the space an element takes up. Allow me to introduce border’s less commonly known cousin: outline. It is virtually identical to border. Only difference is that it behaves more like box-shadow in that it doesn’t take up space in your layout and it has to …
You can add a transparent border to the non-hover state to avoid the “jumpiness” when the border appears: http://jsfiddle.net/TEUhM/3/ #homeheader a:visited, #homeheader a{ border:1px solid transparent; }
Alternatively, you can use pseudo-elements to do so 🙂 the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup: body { background-image: linear-gradient(180deg, #ccc 50%, #fff 50%); background-repeat: no-repeat; …
Use BorderRadius.only and provide the sides return Center( child: Container( height: 100, width: 100, decoration: BoxDecoration( borderRadius: BorderRadius.only( topRight: Radius.circular(40), ), border: Border.all( width: 3, color: Colors.green, style: BorderStyle.solid, ), ), child: Center( child: Text( “Hello”, ), ), ), ); Output
Set the edgecolor to “none”: bar(…, edgecolor = “none”)
Use simple CSS3 (not supported in IE<9) img { box-shadow: 0px 0px 5px #fff; } This will put a white glow around every image in your document, use more specific selectors to choose which images you’d like the glow around. You can change the color of course 🙂 If you’re worried about the users that …
Try overflow:hidden in the outer div: <div style=”border-radius:10px; border: 1px black solid; overflow: hidden”> <div style=”background-color:#EEEEEE;”> Blah </div> </div>