Rounded tabs

Developer
Niels Oeltjen
Size
1,899 Kb
Views
26,312
  1. Rounded tabs Previews
  2. Rounded tabs HTML Codes
  3. Rounded tabs CSS Codes

How do I make an rounded tabs?

Simple css menu with rounded corners on the tabs and in the spaces between!. What is a rounded tabs? How do you make a rounded tabs? This script and codes were developed by Niels Oeltjen on 08 September 2022, Thursday.

Rounded tabs Previews
IQ Test

Rounded tabs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rounded tabs</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <ul>	<li><a href="#">These</a></li><li><a href="#">Tabs</a></li><li><a href="#">Are</a></li><li><a href="#">Okay</a></li>	</ul>
</nav>
</body>
</html>

Rounded tabs - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Dosis);
body { background: #ff2577; font-family: 'Dosis', sans-serif;
}
a { text-decoration: none; -webkit-transition: color 0.4s linear; -moz-transition: color 0.4s linear; -o-transition: color 0.4s linear;	color: #ff2577;
}
a:hover {	color: #272727;
}
nav {	text-align: center;	border-top: 14px solid white;
}
nav ul li {	display: inline-block;	position: relative; border-top: 10px solid white;
}
nav ul li a { font-size: 28px;	line-height: 48px;	display: block;	background: white;	padding: 0 20px;	margin: -10px 10px 0 10px;	text-transform: uppercase;	letter-spacing: 1px;	border-radius: 6px;
}
nav	ul li a:before,
nav	ul li a:after {	background: #ff2577;	text-indent: -999999px;	overflow: hidden;	border-radius: 6px;	content: " ";	width: 20px;	display: block;	position: absolute;	z-index: 1;
}
nav	ul li a:before {	left: -10px;	top: -10px;
}
nav	ul li a:after {	right: -10px;	top: -10px;
}
Rounded tabs - Script Codes
Rounded tabs - Script Codes
Home Page Home
Developer Niels Oeltjen
Username NielsOeltjen
Uploaded September 08, 2022
Rating 4
Size 1,899 Kb
Views 26,312
Do you need developer help for Rounded tabs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Niels Oeltjen (NielsOeltjen) Script Codes
Name
Single element Adobe Brackets logo
Expanding text links
Pretty css spinner
Large menu pattern
Paralax without plugin
Sun
Multiple SVG icons in one file
Nice outline hover effect
Prose.io repo icon
Loading animation
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!