Skip to content

Instantly share code, notes, and snippets.

@deostroll

deostroll/index.html

Created May 8, 2018 14:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save deostroll/c27752493966f1af07c7943f10520e12 to your computer and use it in GitHub Desktop.
Save deostroll/c27752493966f1af07c7943f10520e12 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/niroma
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
:root {
--radius: 7px;
--border-string: 2px solid hotpink;
}
.my-list {
margin:0;
padding: 10px;
list-style-type: none;
font-family: Arial, sans-serif;
}
.my-list li {
padding: 10px;
border-left: var(--border-string);
border-right: var(--border-string);
border-bottom: var(--border-string);
}
.my-list li:first-child {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
border-top: var(--border-string);
}
.my-list li:last-child {
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
border-bottom: var(--border-string);
}
</style>
</head>
<body>
<ul class="my-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<script id="jsbin-source-css" type="text/css">:root {
--radius: 7px;
--border-string: 2px solid hotpink;
}
.my-list {
margin:0;
padding: 10px;
list-style-type: none;
font-family: Arial, sans-serif;
}
.my-list li {
padding: 10px;
border-left: var(--border-string);
border-right: var(--border-string);
border-bottom: var(--border-string);
}
.my-list li:first-child {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
border-top: var(--border-string);
}
.my-list li:last-child {
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
border-bottom: var(--border-string);
}</script>
</body>
</html>
Raw
jsbin.niroma.css
:root {
--radius: 7px;
--border-string: 2px solid hotpink;
}
.my-list {
margin:0;
padding: 10px;
list-style-type: none;
font-family: Arial, sans-serif;
}
.my-list li {
padding: 10px;
border-left: var(--border-string);
border-right: var(--border-string);
border-bottom: var(--border-string);
}
.my-list li:first-child {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
border-top: var(--border-string);
}
.my-list li:last-child {
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
border-bottom: var(--border-string);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment