{"id":1859,"date":"2016-06-28T08:13:39","date_gmt":"2016-06-28T13:13:39","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1859"},"modified":"2016-06-28T08:13:39","modified_gmt":"2016-06-28T13:13:39","slug":"quick-tip-using-css3s-border-width-property","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/quick-tip-using-css3s-border-width-property\/","title":{"rendered":"Quick Tip: Using CSS3’s Border-Width Property"},"content":{"rendered":"

Most people probably use the shorthand when defining CSS’s border property, which is written as follows:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. div{<\/span> <\/div><\/li>\n
  2. border<\/span>:<\/span> [<\/span>border-width<\/span>]<\/span> [<\/span>border-style<\/span>]<\/span> [<\/span>border-color<\/span>]<\/span>;<\/span> <\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    But what some developers may not know is that the border-width property, the first property defined in the CSS shorthand for the border property, takes values other than those defined by px or em. The property also takes keyword values: thin, medium, or thick.<\/p>\n

    Here’s an example of how to include the keyword values in your code and what it might look like:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. div{<\/span><\/div><\/li>\n
    2. border<\/span>:<\/span> medium<\/span> solid<\/span> #333<\/span>;<\/span><\/div><\/li>\n
    3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      \"Screen<\/p>\n

      Share and Enjoy !<\/h3>
      0<\/span><\/span>Shares<\/small><\/div>
      <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

      Most people probably use the shorthand when defining CSS’s border property, which is written as follows:<\/p>\n

      \t\t\t\t\t\t< View plain text ><\/p>\n

      \t\tcss<\/p>\n

      \t\tdiv{
      \nborder: [border-width] [border-style] [border-color];
      \n}<\/p>\n

      But what some developers may not know is that the border-width property, the first property defined […]<\/p>\n

      Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":1860,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[192,1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1859"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1859"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1859\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/1860"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}