We also have more modern CSS properties to create shapes with like shape-outside and clip-path. Creating shapes with CSS is usually a combination of using width, height, top, right, left, border, bottom, transform and pseudo-elements like :before and :after. Some shapes require more 'fix and tricks' than others. There's a lot to tell you about this topic! Therefore I will not cover all (far from all) tools and shapes but this should give you a basic idea of how shapes are created with CSS. You've come to the right place.īelow I will explain the very basics of creating shapes with CSS. Don't miss out on my Youtube channel where I publish weekly videos on FrontEnd coding.Īre you new to web development and CSS? Have you ever wondered how those nice shapes are made that you see all over the internet? Wonder no more. If you want more free content but in video format.