Advanced Search

Borders – Shadow, Pressed, Beveled

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .shadow {
  2. 	padding: 20px;
  3. 	border: 1px solid #f0f0f0;
  4. 	border-bottom: 2px solid #ccc;
  5. 	-webkit-border-radius: 5px;
  6. 	-moz-border-radius: 5px;
  7. 	border-radius: 5px;
  8. }
  9.  
  10. .pressed {
  11. 	color: #fff;
  12. 	padding: 20px;
  13. 	background: #111;
  14. 	border: 1px solid #000;
  15. 	border-right: 1px solid #353535;
  16. 	border-bottom: 1px solid #353535;
  17. 	-webkit-border-radius: 5px;
  18. 	-moz-border-radius: 5px;
  19. 	border-radius: 5px;
  20. }
  21.  
  22. beveled.light {
  23. 	outline: 1px solid #ddd;
  24. 	border-top: 1px solid #fff;
  25. 	padding: 10px;
  26. 	background: #f0f0f0;
  27. }
  28.  
  29. beveled.dark {
  30. 	outline: 1px solid #111;
  31. 	border-top: 1px solid #555;
  32. 	padding: 10px;
  33. 	background: #333;
  34. }

URL: http://www.sohtanaka.com/web-design/css-border-tricks-tutorial

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.