Css border not work

HTML input default chrome border-color override with CSS not working

In order to use border-color in this way, you would need to set the width and style:

border-color: red; border-style: solid; border-width: 15px; 

Alternatively, you can set border: 1px solid blue; and then after that, override just the color using border-color: red; . This works, but only because the wodth and style have already been set.

If you don’t give other border properties, Styles from user agent stylesheet of browsers will get applied to the element.

here in your first example, if you inspect it in developer tool, it will show you border-style:inset inherited.

When you’re writing border: it’s a shorthand property for all of the border styles. So when you write border: 1px solid red it becomes:

However, when you just specify the colour, the browser has no idea what other styles the input should have, so it uses the default ones.

There are a couple of ways to make it easier for you to customise the input boxes. You can select all input types and make them have a general border but then specify using classes more specific styles.

input[type=text] < border: 1px solid red; >input.red-border < border-color: red; >input.blue-border

However, I’m not sure that this answered your question since it seems as though both inputs have a red border. Try to format your questions better with some examples of what you want to achieve with more detail.

Источник

Border-right not showing

would you know why the blue border does not show on the right side of my field? (field has a width of 100%) Many thanks http://jsfiddle.net/KtEdG/ CSS:

.wrapper < position: relative; display: block; margin-right: auto; margin-left: auto; width: 1000px; overflow: hidden; >.block < padding: 20px; background-clip: border-box; box-sizing: border-box; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); overflow-y: auto; overflow-x: hidden; >.block-left < float: left; box-sizing: border-box; overflow: hidden; width: 50%; >.block-right < float: right; overflow: hidden; box-sizing: border-box; width: 50%; >/************************************************************* * CONTACT *************************************************************/ .contact-form input[type=text] < float: left; width: 200px; >.contact-form input[type=email] < float: right; width: 200px; >.contact-form input[type=submit] < float: right; margin-top: 8px; >.contact-form textarea < float: left; margin-top: 20px; margin-bottom: 10px; width: 100%; height: 70px; overflow: auto; >/************************************************************* /************************************************************* * FORMS *************************************************************/ form label < cursor: pointer; >form textarea, form input[type=text], form input[type=password], form input[type=email] < padding: 6px 8px; border-top: 1px solid transparent; border-right: 1px solid #d2d2d2; border-bottom: 1px solid transparent; border-left: 1px solid #d2d2d2; background: #d5d5d5 url('../images/form-bg.png') left top repeat-x; color: #7c7c7c; font-family: 'Arial', sans-serif; resize: none; >form input:focus, form textarea:focus < outline: none; border: 1px solid #0069BA; background: #d5d5d5 none; >form input[type=submit] < padding: 8px 50px; border: 0; background: #0064C4 url('../images/form-caret.png') right center no-repeat; color: #fff; text-transform: uppercase; font-weight: normal; font-size: 14px; font-family: 'Arial', sans-serif; cursor: pointer; >#addressbox < position: relative; padding: 10px 0px 0 10px; margin-bottom: 20px; >#addressbox p < line-height: 14px; >#contact li < display: inline; padding-right: 5px; color: #333; list-style: none; font-weight: 500; font-size: 13px; >#contact li a

fdsfsd
3, rudsfdser
L53ddfsfurg)

  
+352 691 123.456
  
contact@fdsfdssd.lu
  
Plan d'accès

Votre message a bien été envoyé! Merci
E-mail non valide et/ou message vide

Источник

border-bottom not showing on header div

I’m trying to add a 1px border to the bottom of my header div but it isn’t displaying.
Can anyone help? Is it something to do with me adding a specified height to the header div ?
Or something to do with collapsing margins? Or both?! Here’s what I have in the CSS.

@charset "UTF-8"; body < font: 100%/1.4; background-color:#FFF; margin: 0; padding: 0; color: #000; >/* ~~ Element/tag selectors ~~ */ ul, ol, dl < padding: 0; margin: 0; >h1, h2, h3, h4, h5, h6, p < margin-top: 0; padding-right: 15px; padding-left: 15px; >h1 < font-family: 'Abel', Arial, sans-serif; font-size:24px; >h2 < font-family: 'Abel', Arial, sans-serif; font-size:18px; >p < font-family: 'Cutive Mono', Georgia, serif; font-size:14px; >#home #homelink, #aboutus #aboutuslink, #ourwork #ourworklink, #contactus #contactuslink < font-family: 'Abel', Arial, sans-serif; color: #494949; font-size:17px; text-decoration:none; >#mainNav < margin: 0; padding: 0; list-style: none; >#mainNav li < float: left; padding: 40px 20px 0 20px; >#mainNav li:first-child < border-left: 0px; padding-left: 0px; >#mainNav a < font-family: 'Abel', Arial, sans-serif; color: #666; font-size:17px; text-decoration:none; padding: 0 20px 0 20px; >#mainNav a:hover < color:#FFF; background-color: #494949; >a img < border: none; >a:link < color: #42413C; text-decoration: underline; >a:visited < color: #6E6C64; text-decoration: underline; >a:hover, a:active, a:focus < text-decoration: none; >.container < width: 1352px; background-image:url(Images/sktchbook-bgd.jpg); background-repeat:no-repeat; margin: 0 auto; >.header < width: 780px; height: 82px; margin-left:90px; margin-right: 90px; border-bottom: 1px #494949; >.sidebar-logo < float: left; width: 70px; >.subcontainer < width: 980px; min-height: 880px; margin: 0 auto; >.content < padding: 10px 0; margin-left:90px; margin-right:90px; >.fltrt < float: right; margin-left: 8px; >.fltlft < float: left; margin-right: 8px; >.clearfloat

Home
  
About Us
  
Our Work
  
Contact Us

 
Instructions
At K Blondel Design we aim to fill the gap between the over exuberant furniture maker and the general carpenter. Trained in the art of creating affordable and elegant solutions to 3D problems.
As a small business we are able to deliver a personal one to one design service, talking through various design and material possibilities and arriving at an affordable, bespoke and stylish solution.
From design through to construction and installation we specialise in storage solutions, furniture and interiors for both the domestic and commercial markets.
We have 20 years' design and commercial experience and an ever-growing client list spanning Sussex, Hampshire, London and Kent.

Источник

border-radius not working

Sometimes you can apply border-radius to a wrapper container and it will work nicely. For example, I was trying to set border-radius to a div inside of tag and it was not working. But when I applied border-radius to tag directly it worked like a charm.

i was having the same problem, i solved it like this, in my case removing «.btn» class solved my problem as i was using bootsrap.

13 Answers 13

To whomever may have this issue. My problem was border-collapse. It was set to:

Apologies for the late update to this post. After reading the border-collapse spec on W3C can confirm this is semantically the correct answer and appears to have decent cross browser compatibility

I have had issues similar in the past because of other CSS that shouldn’t have been set, then correcting one showed the error in the other. If you create a codepen or something it would be easier to see what might be the issue.

doesnt work properly. separate makes different view of table with spaces between row and columnsm which is innopropriate

For anyone who comes across this issue in the future, I had to add

to the element that I was applying the border radius to. Final working code:

I’d love for someone to explain why this worked for me. 99.999% of times you only need overflow:hidden on the container, but sometimes that simply doesn’t work. It’s very odd.

I tried the above border collapse but that didn’t work — but these (overflow and perspective) got it working for me too. Thanks!

If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div’s overflow can give the impression that the border-radius isn’t working.

Im just highlighting part of @Ethan May answer which is

It would most probably do the work for your case.

if you have parent element than your parent element must have overflow: hidden; property because if your children content is getting oveflowed from parent border than your border will be visible .otherwise your borderradius is working but it is hide by your children content.

For some reason your padding: 7px setting is nullifying the border-radius. Change it to padding: 0px 7px

Thank you. It was that the box applied border-radius successfully, but because of padding, it couldn’t be seen.

Try add !important to your css. Its working for me.

@Alex..i dn’t know what version of chrome you are using..but it works fine for me on Chrome 19.0.1084.56, FF 13.0

I’ve tried to set float: initial in the browser, which solved my problem. Then I’ve noticed, that after removing that property it works as well, I think in my case the problem in the browser: Chrome Version 55.0.2883.87 (64-bit)

Now I am using the browser kit like this:

Your problem is unrelated to how you have set border-radius . Fire up Chrome and hit Ctrl+Shift+j and inspect the element. Uncheck width and the border will have curved corners.

For my case, I have a dropdown list in my div container, so I can not use overflow: hidden or my dropdown list will be hidden.

Inspired by this discussion: https://twitter.com/siddharthkp/status/1094821277452234752 I use border-bottom-left-radius and border-bottom-right-radius in the child element to fix this issue.

make sure you add it the correct value for each child separately

I had the same issue, with a position: absolute container cutting dropdowns because of an overflow: hidden needed by my container to have a working border-radius . I removed the overflow: hidden and applied a selective border radius on each corner elements as suggested. Worked perfectly for me.

you may include bootstrap to your html file and you put it under the style file so if you do that bootstrap file will override the style file briefly like this

 // style file // bootstrap file 

 // bootstrap file // style file 

Including Bootstrap is not a valid answer. You’re suggesting users fix this issue by adding a 34kb resource that users need to download.

@Matt I think he meant that if you would use bootstrap, it could probably not work because your styles get overwritten by bootstrap, because of importing order

Источник