Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How can I create such a border with CSS?

    Hi,

    How can I create such borders with CSS?



    Thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,729
    Thanks
    6
    Thanked 1,016 Times in 989 Posts
    You apply different borders to adjacent elements. Here is a simple example:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>Border test</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<style type="text/css">
    		ul {
    			background: #444;
    			color: white;
    			margin: 0;
    			padding: 0;
    			list-style: none;
    		}
    		li {
    			padding: 5px 10px;
    			border-style: solid;
    			border-width: 1px 0;
    			border-color: #666 transparent #222;
    		}
    		</style>
    	</head>
    	<body>
    		<ul>
    			<li>list item</li>
    			<li>list item</li>
    			<li>list item</li>
    		</ul>
    	</body>
    </html>
    Alternatively, if you have no adjacent elements you can work with generated content.
    Same HTML as above, CSS like this:
    Code:
    		ul {
    			background: #444;
    			color: white;
    			margin: 0;
    			padding: 0;
    			list-style: none;
    		}
    		li {
    			padding: 5px 10px;
    			position: relative;
    			border-top: 1px solid #222;
    		}
    		li:before {
    			content: '';
    			position: absolute;
    			left: 0;
    			top: 0;
    			right: 0;
    			border-top: 1px solid #666;
    		}
    		li:first-child {border-top: none;}
    		li:first-child:before {content: none;}
    Of course you can also work with vertical borders that way.
    Last edited by VIPStephan; 11-10-2013 at 06:22 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •